Css 如何使伪元素始终堆叠在下面？

我想让

：：after

伪元素充当一个保持在原位的阴影，但是按钮上有一个translate on

：hover

按钮{
边框：实心1px黑色；
边界半径：4px；
填充：0.8rem 1rem；
光标：指针；
位置：相对位置；
&：：之后{
内容：''；
宽度：100%；
身高：100%；
位置：绝对位置；
背景：黑色；
左：2px；
顶部：2个；
z指数：-1；
边界半径：继承；
}
&：悬停{
转换：转换（-4px，-4px）；
&：：之后{
转换：翻译（4px，4px）；
}
}
}

在我停下来之前一切都很好

---

另外，为什么只有背景被伪元素覆盖，而按钮文本留在顶部？我该如何解决这个问题？

您听说过

box shadow

CSS属性吗？这可能会让你的生活更轻松。我做过，但没有按预期效果。有没有办法只显示方块阴影？当我在

：：after

上进行背景透明时，阴影仅在元素不存在的地方可见。实际按钮的转换背景与阴影（中间为主体背景）之间存在差距。快速示例：