Css z-index属性没有'；不要在悬停菜单链接上工作

我做了一个菜单栏，并自定义了悬停效果。我希望链接文本位于顶层。问题是，当我将链接悬停在菜单中时，三角形会覆盖文本，如示例所示，即使我将链接的

z-index

设置为999

<div id="menu">             
    <ul>
        <li><a href="#home">yyyyyy</a></li>
        <li><a href="#news">ppppppp</a></li>
        <li><a href="#contact">ggggggg</a></li>
        <li><a href="#about">jjjjjjjj</a></li>
    </ul>                           

---

您的问题是：伪元素被视为

a

元素的一部分后，更改锚定的

z索引也将应用于伪元素

一个快速的解决方案是将arrow伪元素移动到列表项而不是链接



另一个解决方案：
正如Roko C.Buljan在评论中提到的，更直接的解决方案是正确构建arrow伪元素（第二个
边框
颜色需要是
透明
，而不是背景颜色：

li a:hover:after {
  border: 10px solid transparent;
  border-bottom-color: #ff8888; 
}

…或者只需正确构建箭头（提示：
边框：10px实心透明；
）@RokoC.Buljan写一个答案，我会删除MineNoooo不要删除你的答案。这绝对正确。你最终可以将我的评论作为附加提示添加到你自己的答案中。太棒了！这帮助我解决了一个问题，在CSS中使用
span:：before
包装在span中的链接没有点击。我用
span a:：before.
li {
  position: relative;
}

li a {
  position: relative;
  z-index:2;
}

li:hover::after {
  position: absolute;
}

li a:hover:after {
  border: 10px solid transparent;
  border-bottom-color: #ff8888; 
}