动画的伪元素堆叠

Question

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

.button {
 width: 50px;
 height: 50px;
 background: lightblue;
 position: absolute;
 top: 50px;
 left: 50px;
}
i.ripple:before {
 content: "";
 position: absolute;
 border-radius: 50%;
 width: 30px;
 height: 30px;
 background: darkorange;
 animation: ripple 2s ease-in infinite;
}
@keyframes ripple {
 0% {transform: scale(1);opacity: .5;}
 100% {transform: scale(8);opacity: 0;}
}

<i class="ripple button">test</i>

如果您运行这个例子，您会看到橙色圆圈位于 .button 的蓝色框上方 class，我希望它在后面。

我认为这个问题与另一个问题有关： ::before pseudo-element stacking order issue 但是想不通很多。

Answer 1

将它的 z-index 设置为 -1 就可以了。

.button {
 width: 50px;
 height: 50px;
 background: lightblue;
 position: absolute;
 top: 50px;
 left: 50px;
}
i.ripple:before {
 content: "";
 position: absolute;
 border-radius: 50%;
 width: 30px;
 height: 30px;
 background: darkorange;
 animation: ripple 2s ease-in infinite;

 z-index:-1;
}
@keyframes ripple {
 0% {transform: scale(1);opacity: .5;}
 100% {transform: scale(8);opacity: 0;}
}

<i class="ripple button">test</i>

Answer 2

更新Z-Index。

.button {
 width: 50px;
 height: 50px;
 background: lightblue;
 position: absolute;
 top: 50px;
 left: 50px;
}
i.ripple:before {
 content: "";
 position: absolute;
 border-radius: 50%;
 width: 30px;
 height: 30px;
 background: darkorange;
 animation: ripple 2s ease-in infinite;
  z-index: -1;
}
@keyframes ripple {
 0% {transform: scale(1);opacity: .5;}
 100% {transform: scale(8);opacity: 0;}
}

<i class="ripple button">test</i>

.button {
 width: 50px;
 height: 50px;
 background: lightblue;
 position: absolute;
 top: 50px;
 left: 50px;
}
i.ripple:before {
 content: "";
 position: absolute;
 border-radius: 50%;
 width: 30px;
 height: 30px;
 background: darkorange;
 animation: ripple 2s ease-in infinite;
}
@keyframes ripple {
 0% {transform: scale(1);opacity: .5;}
 100% {transform: scale(8);opacity: 0;}
}

<i class="ripple button">test</i>

动画的伪元素堆叠

pseudo-element stacking for animations

css

animation

pseudo-element