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

问题描述

我正在创建一个非常简单的导航栏，并且我希望在链接上进行悬停过渡。我想在每个链接中添加:: before元素，以在悬停时平稳过渡不同的颜色背景。问题是（就我而言）：:: before元素会忽略其z-index赌注，并将链接文本隐藏在后面。

如果要尝试做一些不可能的事情，或者实际上找不到我无法找到的解决方案，我会链接

。

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

谢谢大家的答复。

解决方法

您可以仅将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>