伪元素与子元素重叠

Question

 .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 会将您的文本置于一个全新的堆叠上下文中，高于其他所有内容。

我也分叉了你的Fiddlehere.

Answer 2

不是让伪元素过渡到更大的尺寸，而是过渡元素的背景颜色以匹配伪元素。它给出了类似的效果。

jsfiddle

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

我没有在这上面花很长时间，所以也许可以调整它以符合您最初预期的效果。

伪元素与子元素重叠

Pseudo element overlaps child element

html

css

pseudo-element