Css 动画的伪元素叠加

我使用伪选择器将涟漪效应设置为CSS类。 我希望动画从元素本身后面运行，但我无法找到如何做到这一点

。按钮{
宽度：50px；
高度：50px；
背景：浅蓝色；
位置：绝对位置；
顶部：50px；
左：50px；
}
i、 ripple:以前{
内容：“；
位置：绝对位置；
边界半径：50%；
宽度：30px；
高度：30px；
背景：darkorange；
动画：无限轻松；
}
@关键帧波纹{
0%{变换：比例（1）；不透明度：.5；}
100%{变换：比例（8）；不透明度：0；}
}

---

test

将其

z-index

设置为

-1

，您应该表现良好

。按钮{
宽度：50px；
高度：50px；
背景：浅蓝色；
位置：绝对位置；
顶部：50px；
左：50px；
}
i、 ripple:以前{
内容：“；
位置：绝对位置；
边界半径：50%；
宽度：30px；
高度：30px；
背景：darkorange；
动画：无限轻松；
z指数：-1；
}
@关键帧波纹{
0%{变换：比例（1）；不透明度：.5；}
100%{变换：比例（8）；不透明度：0；}
}

测试

更新Z索引

。按钮{
宽度：50px；
高度：50px；
背景：浅蓝色；
位置：绝对位置；
顶部：50px；
左：50px；
}
i、 ripple:以前{
内容：“；
位置：绝对位置；
边界半径：50%；
宽度：30px；
高度：30px；
背景：darkorange；
动画：无限轻松；
z指数：-1；
}
@关键帧波纹{
0%{变换：比例（1）；不透明度：.5；}
100%{变换：比例（8）；不透明度：0；}
}

---

test

hm，它确实有效，但是我的button类有一个z索引：1；（示例中没有，这是我的错）并且似乎在搞砸这件事solution@Dunnow这在这种html结构中是不可能的。您必须在

.button

中添加一个元素，以包含文本并设置背景等，以便伪元素可以在其后面。由于按钮创建了一个堆叠顺序（通过定位并拥有一个z-index，它的任何子元素都不能跟随它，伪元素都是子元素），所以我将尝试从代码中删除z-index:1，然后将-1应用于涟漪本身。谢谢