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>

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

Answer 1

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

我相信发生的事情是position: absolute .outer::before将span.inner放入新的stacking context，position: relative被卡在下面的另一个堆叠环境中。将.inner添加到MutableDateTime dateTime = new MutableDateTime(); System.out.println("CurrentTime " + dateTime); dateTime.addMonths(-1); //last Month dateTime.setMinuteOfDay(0); dateTime.setSecondOfMinute(0); dateTime.setHourOfDay(12); dateTime.setDayOfMonth(1); //first Day of last Month System.out.println("first Day Time " + dateTime); dateTime.setDayOfMonth(dateTime.dayOfMonth().getMaximumValue()); //set Day to last Day of that month dateTime.setMinuteOfDay(59); dateTime.setSecondOfMinute(59); dateTime.setHourOfDay(23); //time set to night time 11:59:59 System.out.println("last Day Time " + dateTime);会使您的文字进入一个全新的堆叠环境，而不是其他任何内容。

我还分叉你的小提琴here。

伪元素与子元素重叠

1 个答案: