css - 我有这个插入符号，不会按预期显示

我正在尝试使用此代码看起来不错的方式创建一个插入符号，但是我的插入符号根本没有显示。

代码：

.caret {
  position: relative;
  cursor: pointer;
}
.caret:before {
  content: '';
  position: absolute;
  top: 25%;
  left: 12px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid white;
}

 <li>
   <a href="#">
     <h3>Home</h3>
   </a>
   <span class="caret">
</li>      

我坚信应该这样做。有人可以告诉我为什么不是吗？

最佳答案

您的.caret是白色的，在白色背景上不可见。因此更改为另一种颜色。

h3 {
  display:inline-block;
}
.caret {
  position: relative;
  cursor: pointer;
}
.caret::before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 12px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid black;
}

<li>
  <a href="#">
    <h3>Home</h3>
  </a>
  <span class="caret"></span>
</li>

关于css - 我有这个插入符号，不会按预期显示，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40603792/