动画的伪元素堆叠

Question

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

.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 类的蓝色框的顶部，我希望它位于后面。

我认为这个问题与另一个问题有关： ::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 索引。

.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>