Question

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

我无法弄清楚当活动时他们如何让箭头显示在导航结束时。我以为他们在最后添加了一个箭头图像，只要链接处于活动状态但是任何想法都将它放在那里？

Answer 1

他们使用了：after伪选择器。使用绝对定位使箭头位于nav元素之外，并使用CSS创建三角形箭头。

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;
}

活动侧导航栏箭头

1 个答案: