绝对定位 ::before 元素忽略 z-index 堆叠

Question

我正在创建一个非常简单的导航栏，我希望在 link 上进行悬停过渡。我想在每个 link 中添加 ::before 元素，以便在悬停时平滑地过渡不同颜色的背景。问题是（就我而言）那些 ::before 元素忽略了它们的 z-index 放样并且它们隐藏了 link 文本。

我会 link 知道我是在尝试做一些不可能的事情，还是实际上我找不到解决方案。

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>

绝对定位 ::before 元素忽略 z-index 堆叠

Absolute positioned ::before element ignores z-index stacking

css

css-position

navbar

transition

z-index