动画的伪元素堆叠

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，您应该很好。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

更新Z-Index。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;