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

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

菜单中有多个项目，活动的项目后面有一个箭头。 菜单项是类似以下代码的标签：

<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。

有什么帮助吗？

尝试这个：

.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.

See example http://jsfiddle.net/u85as/1/.