CSS :after element relative position

Question

我想在列表项 (li) 悬停时向其添加箭头效果，但它的位置并不相对于列表项起作用。当我将 left: 50% 属性添加到 :after 元素时，每个单独的箭头都会以 ul 为中心，而不是它的列表项。没有 left:50% 属性，箭头位于其列表项下方但不居中。所以我有点卡在这里。

这是我的 CSS:

nav.main-nav 
{
    position: absolute;
    z-index: 100;
    width: 980px;
}
    nav.main-nav > ul > li
    {
        position: relative;
        display: table-cell;
        list-style-type: none;            
        vertical-align: middle;
     }
     nav.main-nav > ul > li:hover
     {
         background-color: #304a60;
     }

          nav.main-nav > ul > li:hover:after
          {
                content: "";
                width: 0;
                height: 0;
                border-left: 10px solid transparent;
                border-right: 10px solid transparent;
                border-top: 10px solid #304a60;
                position: absolute;
                bottom: -10px;
                left: 50%;
           }

如有任何帮助，我们将不胜感激。

Answer 1

我会将箭头放在 a 本身上，您可以将其设置为 display: block 和 position:relative。然后你就有了 a:after 的定位上下文。