伪元素在不透明度设置为 1 时隐藏内容

Question

考虑HTML

<section id="speak-to-our-experts">
    <a class="mega-link mega-link--primary" href="#">
        <h2>get in touch</h2>
        <span>speak to one of our experts</span>
    </a>
</section>

以下 CSS 导致锚元素中的文本出现问题。

#speak-to-our-experts {
  .mega-link {
    display: block;
    padding: 3.5rem 0 4.625rem;
    width: 100%;
    text-decoration: none;
    text-align: center;
    transition: background-color .3s;
    position: relative;
    
    &.mega-link--primary {
      background-color: #ef0d33;
      color: $white;
      overflow: hidden;
    }
    &.mega-link--primary:hover:before {
      transform: translateX(10%) skew(-20deg);
      opacity: 1;
    }
    &.mega-link--primary:before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      width: 140%;
      height: 100%;
      transform: translateX(100%);
      background-color: #cb0b2b;
      opacity: 0;
      transition: transform 1.1s ease,opacity .3s ease;
    }
  }
}

尽管我根据需要从伪元素中获得了幻灯片的效果 - 不透明度会给我带来问题，因为它隐藏了下面的文本。我已经尝试了z-index无济于事。这是怎么回事？

Answer 1

像下面这样调整z-index。.mega-link 中的那个将创建一个堆叠上下文，防止伪元素落后，伪元素上的那个将使其成为该堆叠上下文中的最低层。

.mega-link {
  display: block;
  padding: 3.5rem 0 4.625rem;
  width: 100%;
  text-decoration: none;
  text-align: center;
  transition: background-color .3s;
  position: relative;
  z-index:0; /*added*/
}
.mega-link--primary {
  background-color: #ef0d33;
  color: #fff;
  overflow: hidden;
}
.mega-link--primary:hover:before {
  transform: translateX(10%) skew(-20deg);
  opacity: 1;
}
.mega-link--primary:before {
  content: "";
  position: absolute;
  z-index:-1; /*added*/
  top: 0;
  right: 0;
  width: 140%;
  height: 100%;
  transform: translateX(100%);
  background-color: #cb0b2b;
  opacity: 0;
  transition: transform 1.1s ease, opacity .3s ease;
}

<section id="speak-to-our-experts">
  <a class="mega-link mega-link--primary" href="#">
    <h2>get in touch</h2>
    <span>speak to one of our experts</span>
  </a>
</section>

相关：为什么具有 z 索引值的元素不能覆盖其子元素？

---

另一个想法是通过添加position:relative来确保稍后绘制文本，例如：

.mega-link {
  display: block;
  padding: 3.5rem 0 4.625rem;
  width: 100%;
  text-decoration: none;
  text-align: center;
  transition: background-color .3s;
  position: relative;
}
.mega-link--primary {
  background-color: #ef0d33;
  color: #fff;
  overflow: hidden;
}
.mega-link--primary:hover:before {
  transform: translateX(10%) skew(-20deg);
  opacity: 1;
}
.mega-link--primary:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 140%;
  height: 100%;
  transform: translateX(100%);
  background-color: #cb0b2b;
  opacity: 0;
  transition: transform 1.1s ease, opacity .3s ease;
}
.mega-link--primary *{
  position:relative;
}

<section id="speak-to-our-experts">
  <a class="mega-link mega-link--primary" href="#">
    <h2>get in touch</h2>
    <span>speak to one of our experts</span>
  </a>
</section>

相关：为什么 position：relative ; 似乎改变了 z 索引？