html - 侧导航栏箭头处于事件状态

Question

我正在尝试通过从 Web 重新创建模板来提高我的 Html 和 Css 技能。到目前为止，我学到了很多东西，但我仍然停留在一个模板上。 http://weblusive-themes.com/moler/blog/

我不明白他们如何让箭头在激活时显示在导航的末尾。 我在想他们在最后添加了一个箭头图像，一旦链接处于事件状态就将其放置在那里但有什么想法吗？

Answer 1

他们使用了 :after 伪选择器。使用绝对定位将箭头定位在导航元素之外，并使用 CSS 创建三 Angular 形箭头。

ul.menu > li a.active:after, ul.menu > li.current_page_item a:after, ul.menu > li.current-menu-item > a:after, ul.menu > li.current-menu-parent > a:after {
  border-bottom: 29px solid rgba(0, 0, 0, 0);
  border-left: 20px solid #FFED27;
  border-top: 28px solid rgba(0, 0, 0, 0);
  content: "";
  left: 300px;
  position: absolute;
  top: 0;
  z-index: 100;
}