我发誓我已经完成了这一百次,但是对于我的生活,我无法弄清楚为什么我的：在伪元素的背景显示在文本后面而不是在锚点的背景之后.思考？
.button {
background: tomato;
padding: 10px 30px;
margin: 20px 0;
display: inline-block;
}
.button:hover {
margin: 18px 0 22px 2px;
position: relative;
z-index: 2;
}
.button:hover:after {
position: absolute;
background: red;
top:-2px;
left: -2px;
content: "";
z-index: -10;
width: 100%;
height: 100%;
}
<a class="button" href="#">Meow</a>
解决方法
向元素添加z-index值时,将创建新的堆叠上下文.该元素的每个子元素都将叠加在其上.
因此,当您想要在其父元素后面放置元素时,只需不要在父元素上创建堆叠上下文.您仍然需要使用负z索引,因为父级的默认堆栈级别将为0(在任何上下文中元素都是)
