具有 z-index 的伪元素：-1 被背景颜色隐藏

Question

我有一个 .link class 下面有一个 ::after 伪元素（作为悬停时的框阴影）。

.bg {
    background-color: aqua;
    height: 100vh;
}

.link {
    position: relative;
    font-weight: bold;
}

.link::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-shadow: 0 0 0 1em #888888 inset;
    opacity: 0;
}

.link:hover::after {
    opacity: 1;
}

<div class="bg">
  <p class="link">Link</p>
</div>

但是，当我向包含的 div 元素添加背景色时，它会覆盖框阴影。我试过添加

position: absolute;
z-index: -2;

到 div，但这会导致 div 出现大小调整问题，尽管堆叠是正确的。我想知道是否有一种首选方法可以将伪元素放置在 bg 层之上但在原始 link class 之后？谢谢！

Answer 1

将z-index:0（或任何值）添加到背景元素以创建堆叠内容并避免伪元素移动到后面：

.bg {
    background-color: aqua;
    height: 100vh;
    position:relative;
    z-index:0; /* added */
}

.link {
    position: relative;
    font-weight: bold;
}

.link::after {
    content: '';
    position: absolute;
    z-index: -999; /*you can put any negative value now*/
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-shadow: 0 0 0 1em #888888 inset;
    opacity: 0;
}

.link:hover::after {
    opacity: 1;
}

<div class="bg">
  <p class="link">Link</p>
</div>

具有 z-index 的伪元素：-1 被背景颜色隐藏

Pseudo element with z-index: -1 is hidden by background-color

html

css

z-index