在HTML + CSS中的活动菜单项下添加一个箭头

Question

我正在尝试生成如下菜单:

菜单中有几个项目,活动的项目后面有一个箭头.菜单项是以下代码的标签:

<div class="menuCenter">
     <div class="linksWrapper">
      <a href="#">Home</a>
      <a class="menuCenterLinkLeft" href="#">Plans & Pricing</a>
      <a class="menuCenterLinkLeft" href="#">Sign In</a>
      <a class="menuCenterLinkLeft active" href="#">Sign Up</a>
      <a class="menuCenterLinkLeft" href="#">Contact</a>
     </div>
</div>

我尝试了两个选项:1-绝对用javascript定位箭头图像.调整页面大小时我遇到问题.2-使用:after伪元素,如下所示:

.linksWrapper a.active:after
{
    content: url("images/arrowImg.png");
    position: relative;
    left: -40px;
    top: 30px; 
}

这种方法的问题是箭头的水平对齐.它应该低于链接的中心,我无法实现.我可以使用HTML5或CSS 3.

有帮助吗？

Answer 1

试试这个:

.linksWrapper a.active:after {
    content: url("images/arrowImg.png");
    position: absolute;
    left: 50%;
    top: 30px;
    margin-left: - <width-of-your-image> / 2; /* negative number!*/
}

旁注:我避免{使用换行符,因为它可能在javascript中有令人讨厌的效果.

这个技巧left:50%;与通过将其设置回半宽度来校正位置相结合margin-left.

见例子.