Warum funktioniert mein Z-Index bei meinen :before- und :after-Pseudoelementen nicht?

Ich habe eine Position, aber der Z-Index funktioniert nicht

Bei Verwendung des Z-Index in CSS, wenn dies nicht der Fall zu sein scheint Um zu funktionieren, besteht der erste Schritt darin, noch einmal zu überprüfen, ob auf alle Elemente die richtige Positionierung angewendet wurde.

In diesem Fall liegt das Problem darin, dass die Transformationseigenschaft auf die Pseudoelemente :before und :after angewendet wird des #mainplanet-Elements. Um sicherzustellen, dass der Z-Index für diese Elemente wie erwartet funktioniert, sollte die Transformationseigenschaft entfernt werden.

Hier ist der geänderte CSS-Code:

<pre class="snippet-code-css lang-css prettyprint-override">:root{

--size:200px;
}

Hintergrund {

Breite:100 %;
Höhe:100 %;
Position:absolut;
oben:0 ;
left:0;
background: linear-gradient(-23.5deg, #000033, #00001a);
z-index:-2;
}

background # Hauptplanet {

width:var(--size);
height:var(--size);
background:#fff;
position:relative;
top:50 %;
left:50%;
transform:translate(-50%,-50 %);
border-radius:50%;
}

background #mainplanet: before,#background #mainplanet:after{

content:"";
width:calc(var(--size) * 1.5);
height:calc(var(--size) / 2);
border:30px solid #000;
position:absolute;
top:10px;
left:-80px;
border-radius:50%;
/ Entfernen Sie die Transformationseigenschaft /
}

background #mainplanet:before{

border-top-color:transparent;
}

Hintergrund #mainplanet:after{

z-index:-3;
}

<pre class="snippet-code-html lang-html prettyprint-override"><div id="background">