动画伪元素和z-index - 适用于Firefox，但不适用于Chrome

Question

在firefox伪元素后面是div（这是我想要实现的）但是在chrome中它们位于顶部。这是chrome中的错误吗？谁知道如何解决这个问题？在div中添加z-index并没有帮助我解决这个问题。

我还尝试将一些样式应用于div：hover但是当我将鼠标悬停在div元素上时它落后于伪元素（在Firefox中，Chrome伪元素已经位于顶部）。

在codepen https://codepen.io/mariuszdaniel/pen/rzdyRV?editors=1100上进行演示

@keyframes spin {
	from {
		transform: rotate(0turn)
		           translateY(-100%) translateY(50%)
		           rotate(1turn)
	}
	to {
		transform: rotate(1turn)
		           translateY(-100%) translateY(50%)
		           rotate(0turn);
	}
}

@keyframes spin-rev {
	from {
		transform: rotate(1turn)
		           translateY(-100%) translateY(50%)
		           rotate(0turn)
	}
	to {
		transform: rotate(0turn)
		           translateY(-100%) translateY(50%)
		           rotate(1turn);
	}
}

@keyframes glow {
	from {
		filter: blur(100px);
		opacity:  0.8
	}
	to {
		filter:  blur(200px);
		opacity: 0.4;
	}
}

.path { 
	width:300px; 
	height: 300px;
	padding: 20px;
	margin: 100px auto;
	border-radius: 50%;
	background-image: url(https://unsplash.it/300);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	transition:  transform 0.5s, box-shadow 0.5s;
}

.path:hover {
	transform: scale(1.25);
	box-shadow:  0 0 50px 0 #3333;
}

.path::before, .path::after  {
	content: "";
	position:aboslute;
	display: block;
	width: 75%;
	height: 75%;
	margin: 25% auto 0;
	border-radius: 50%;
 	/*filter: blur(100px); */
	/*opacity: 0.5;*/
}
	
.path::before  {
	/*mix-blend-mode:  hue;*/
	z-index: -200;
	background-color: #21D4FD;
	background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
	animation: spin 9s infinite /*alternate*/ linear, glow 3s infinite alternate linear;
}

.path::after {
	margin-top: -100%;
	z-index: -100;
	background-color: #08AEEA;
	background-image: linear-gradient(0deg, #08AEEA 0%, #2AF598 100%);
	animation: spin-rev 6s infinite /*alternate-reverse*/ linear, glow 6s infinite alternate linear;
}

<div class="path"></div>