Question

我有一个.link类，其下带有:: 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层上方但在原始链接类后面的首选方法吗？谢谢！

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>

相关：Why elements with any z-index value can never cover its child?

具有z-index：-1的伪元素被background-color

1 个答案: