CSS - 导航栏上的指针悬停

Question

我想制作一个导航栏，其悬停时有一个向下的箭头。 与此类似:

有没有办法在 CSS 中做到这一点，而不使用箭头作为背景图像并在元素上添加填充？

Answer 1

您可以使用 :after 伪元素创建 CSS 三 Angular 形并确定其绝对位置。

类似这样的事情:

li.active a:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-top: 6px solid #333;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  margin-left: -3px
}

<强> Demo