创建向下箭头指针

如何创建向下箭头parent在CSS中，所以它看起来像一个对话气泡？

这就是我尝试过的。

<div class="parent">TEST
   <span class="tri">TEST</span>
</div>

.tri {
  opacity: 0;
 }
 .tri:before {
  position: absolute;
  top: 40%;
  left: 50%;
  margin-top: -15px;
  margin-left: -100px;
  background-color: #FFF;
  color: #000;
  text-align: center;
  padding: 10px;
  min-width: 200px;
}

.tri:after {
  border-top:  5px solid #000;
  border-top:  5px solid #000;
  border-right:  5px solid transparent;
  border-left:  5px solid transparent;
}

.parent:hover .tri:before, .parent:hover .tri:after {
  opacity: 1;
}

Fiddle https://fiddle.jshell.net/0h05kbsd/2/

你在这里错过了两件事：

• 内容：'';对于伪类

• 显示父伪

  :before,
  
  :after {
    content: '';
  
  }
  
  .parent:hover .tri,
  
  .parent:hover .tri:before,
  
  .parent:hover .tri:after {
  
    opacity: 1;
  
  }
  

:before,
:after {
  content: '';
}
.parent:hover .tri,
.parent:hover .tri:before,
.parent:hover .tri:after {
  opacity: 1;
}
.tri {
  opacity: 0;
}
.tri:before {
  position: absolute;
  top: 40%;
  left: 50%;
  margin-top: -15px;
  margin-left: -100px;
  background-color: #FFF;
  color: #000;
  text-align: center;
  padding: 10px;
  min-width: 200px;
}
.tri:after {
  border-top: 5px solid #000;
  border-top: 5px solid #000;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}

<div class="parent">TEST
  <span class="tri">TEST</span>
</div>

https://fiddle.jshell.net/0h05kbsd/3/ https://fiddle.jshell.net/0h05kbsd/3/

您还可以使用 unicode 字符来节省一些代码，例如\25bc:

a:hover:after {
  content:'\25bc';
}

<a href> link to hover to show a down-arrow</a>

unicode 资源等：http://unicode-table.com/en/sets/arrows-symbols/ http://unicode-table.com/en/sets/arrows-symbols/