如何为伪元素添加z-index？解决hover不覆盖文本及替代mix-blend-mode失效问题

我来帮你解决这两个伪元素的z-index问题，其实核心都和定位元素的层级规则有关，咱们一步步来：

首先要明确：z-index只对非static定位的元素生效（也就是position设为relative/absolute/fixed/sticky的元素）。给伪元素加z-index的正确步骤是：

• 给伪元素设置position: absolute（或其他非static值）
• 确保它的父元素也设置了非static定位（比如position: relative），这样伪元素的z-index会相对于父元素的层级计算
• 最后直接给伪元素加上z-index: [数值]即可

基础示例代码：

.parent {
  position: relative; /* 关键：父元素设非static定位 */
}

.parent::before {
  content: '';
  position: absolute; /* 伪元素设非static定位 */
  z-index: 1; /* 此时这个z-index会正常生效 */
  width: 100%;
  height: 100%;
  background: #eee;
}

要实现伪元素在文本下方的效果，核心是让伪元素的层级比文本低，需要注意两个关键点：

1. 父元素必须设position: relative，这样伪元素的z-index会相对于父元素生效
2. 给伪元素设置负数的z-index（比如z-index: -1），这样它就会被父元素内部的文本（默认层级为0）自然覆盖

结合hover动画的完整示例：

<div class="hover-card">Hover to see the effect</div>

.hover-card {
  position: relative; /* 必须：让伪元素的层级相对于它计算 */
  padding: 1.2rem 2.5rem;
  font-size: 1.3rem;
  cursor: pointer;
  /* 文本默认层级为0，无需额外设置 */
}

.hover-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #1976D2;
  z-index: -1; /* 关键：把伪元素放到文本下方 */
  transition: width 0.3s ease;
}

.hover-card:hover::before {
  width: 100%;
}

你提到想用z-index替代mix-blend-mode但没效果，大概率是这两个原因：

• 父元素没有设置非static定位，导致伪元素的z-index是相对于整个文档计算的，容易被其他元素的层级干扰
• 伪元素没有设置position属性（默认是static），z-index对static元素完全不生效

按照上面的方法调整后，伪元素就会稳定待在文本下方，hover时只会展示背景动画，不会覆盖文字，完全不需要依赖mix-blend-mode。

内容的提问来源于stack exchange，提问作者Chun Kit Cheng