html - 伪元素与子元素重叠

Question

Fiddle!

 .wrapper {
   justify-content: center;
   display: flex;
   background: black;
 }
 .outer {
   text-decoration: none;
   display: inline-block;
   position: relative;
   background: #555;
 }
 .outer::before {
   display: block;
   content: "";
   position: absolute;
   top: 0;
   width: 100%;
   height: 5px;
   background: orange;
   transition: all 0.3s;
 }
 .outer:hover::before {
   height: 100%;
 }
 .inner {
   display: inline-block;
   color: white;
   padding: 20px;
 }

<div class="wrapper">
  <a class="outer" href="#">
    <span class="inner">
            Hover
    </span>
  </a>
</div>

你看着 fiddle 并将鼠标悬停在框上，你会看到::before 伪元素与文本重叠。我研究了半个小时，但没有找到答案。如果您能就如何使元素不与文本重叠提供一些帮助，我将不胜感激。我可以使用数据属性。

Answer 1

尝试将 position: relative 添加到 .inner 的 CSS 规则中。

.wrapper {
  justify-content: center;
  display: flex;
  background: black;
}
.outer {
  text-decoration: none;
  display: inline-block;
  position: relative;
  background: #555;
}
.outer::before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 5px;
  background: orange;
  transition: all 0.3s;
}
.outer:hover::before {
  height: 100%;
}
.inner {
  display: inline-block;
  position: relative;
  color: white;
  padding: 20px;
}

<div class="wrapper">
  <a class="outer" href="#">
    <span class="inner">
        Hover
    </span>
  </a>
</div>

我相信发生的事情是 .outer::before 上的 position: absolute 将它放在一个新的 stacking context 中。 ，并且 span.inner 卡在下面的另一个堆栈上下文中。将 position: relative 添加到 .inner 会将您的文本置于一个全新的堆叠上下文中，高于其他所有内容。

我也 fork 了你的 Fiddle here .