Pourquoi mon z-index ne fonctionne-t-il pas sur mes pseudo-éléments :before et :after ?

J'ai une position mais l'index Z ne fonctionne pas

Lors de l'utilisation de l'index Z en CSS, s'il ne semble pas fonctionner fonctionne, la première étape consiste à vérifier que tous les éléments ont le bon positionnement appliqué.

Dans ce cas, le problème vient de la propriété transform appliquée aux pseudo-éléments :before et :after de l'élément #mainplanet. Pour garantir que Z-index fonctionne comme prévu pour ces éléments, la propriété transform doit être supprimée.

Voici le code CSS modifié :

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

--size:200px;
}

arrière-plan {

largeur:100%;
hauteur:100%;
position:absolue;
haut:0 ;
gauche:0;
arrière-plan : dégradé linéaire(-23.5deg, #000033, #00001a);
z-index:-2;
}

arrière-plan # planète principale {

largeur:var(--size);
hauteur:var(--size);
arrière-plan:#fff;
position:relative;
top:50 %;
left:50%;
transform:translate(-50%,-50%);
border-radius:50%;
}

background #mainplanet : avant,#background #mainplanet:après{

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%;
/ Supprimez la propriété de transformation /
}

background #mainplanet:before{

border-top-color:transparent;
}

background #mainplanet:after{

z-index:-3;
}

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