绝对定位::before元素忽略z索引堆叠

Question

我正在创建一个非常简单的导航栏，我希望在链接上进行悬停转换。我想添加：：元素之前在每个链接上平滑过渡不同颜色的悬停背景。问题是(就我而言(那些：：before元素忽略了它们的z索引标记，并将链接文本隐藏在后面。

我会链接以了解我是否试图做一些不可能的事情，或者实际上有一个我找不到的解决方案。

ul.menu-principal>li {
display: inline-block;
}
ul.menu-principal>li>a {
color: #000;
display: block;
text-transform: uppercase;
padding: 10px;
position: relative;
z-index: 96;
}
ul.menu-principal>li>a::before {
content: '';
position: absolute;
z-index: 95;
top: 0;
left: 0;
width: 100%;
height: 0;
background: orange;
transition: all .2s linear;
}
ul.menu-principal>li>a:hover::before {
height: 100%;
}
ul.menu-principal>li:hover a {
color: #fff;
}

<ul class="menu-principal">
<li><a href="#">Item-01</a></li>
<li><a href="#">Item-01</a></li>
<li><a href="#">Item-01</a></li>
<li><a href="#">Item-01</a></li>
</ul>

网站http://canfosses.mastercamping.com

感谢大家的回复。

Answer 1

您可以只使用z-index: -1:

ul.menu-principal>li {
display: inline-block;
}
ul.menu-principal>li>a {
color: #000;
display: block;
text-transform: uppercase;
padding: 10px;
position: relative;
z-index: 96;
}
ul.menu-principal>li>a::before {
content: '';
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 0;
background: orange;
transition: all .2s linear;
}
ul.menu-principal>li>a:hover::before {
height: 100%;
}
ul.menu-principal>li:hover a {
color: #fff;
}

<ul class="menu-principal">
<li><a href="#">Item-01</a></li>
<li><a href="#">Item-01</a></li>
<li><a href="#">Item-01</a></li>
<li><a href="#">Item-01</a></li>
</ul>