I'；我试图实现用css堆叠卡片的效果，但伪元素不断出现在正面

我尝试了这里描述的不同的事情： 即使父元素出现在前面，当我悬停在上面时，它也会出现在背景中。 当我在父元素上使用trasfrom时，它似乎创建了一个新的堆栈上下文，一切都进行了brrrr。 我已经想过，当我悬停在上面时，只需要创建3个具有不同z索引的单独div并对它们进行转换，但是有没有一种好方法可以用伪元素实现这种效果呢

以下是一个基本示例，说明了该问题：

.card\u容器{
宽度：33.333%；
填充：1rem；
}
.卡片{
显示：块；
身高：100%；
文本对齐：居中；
背景色：#f18e9b；
位置：相对位置；
改变：转变；
}
.卡：：以前{
内容：“；
位置：绝对位置；
宽度：100%；
身高：100%；
排名：0；
左：0；
z指数：-1；
背景色：#e84a5f；
}
.卡片：：之后{
内容：“；
位置：绝对位置；
宽度：100%；
身高：100%；
排名：0；
左：0；
z指数：-2；
背景色：#cc1a32；
}
.卡：悬停{
-webkit转换：转换（-5px，0）；
转换：转换（-5px，0）；
}
.卡：悬停：之前{
-webkit转换：翻译（5px，0）；
变换：平移（5px，0）；
}
.卡片：悬停：之后{
-webkit转换：翻译（10px，0）；
转换：转换（10px，0）；
}
.内容{
填充：4rem1rem；
}
.头衔{
字体大小：1.25rem；
背景颜色：灰色；
边界半径：3px；
填充：0.5雷姆；
}

标题
字幕
随机文本

我看到两件事。首先，您没有为

.card

设置z索引。其次，您仅使用一个

：

访问伪元素，如

&:before

您应该使用两个

&：：before

和

&：：after

。由于您没有提供最小的可复制示例，很难再帮你了这里有一件事也许你可以弄明白smth在

中添加1000的z索引。卡片
不会起作用，因为伪元素在不同的堆叠上下文中，是的
&：：before
不正确，但是sass使用
：
在css中编译它，使用外部代码片段是一种不好的补充方式你的问题。强烈建议改用stackoverflow代码段。您可以使用stackoverflow代码段编辑问题。