Why is my z-index not working on my :before and :after pseudo-elements?

I Have Position but Z Index Is Not Working

When using Z-index in CSS, if it doesn't seem to be working, the first step is to double-check that all the elements have the correct positioning applied.

In this case, the issue is with the transform property being applied to the :before and :after pseudo-elements of the #mainplanet element. To ensure that Z-index works as expected for these elements, the transform property should be removed.

Here's the modified CSS code:

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

--size:200px;
}

background {

width:100%;
height:100%;
position:absolute;
top:0;
left:0;
background: linear-gradient(-23.5deg, #000033, #00001a);
z-index:-2;
}

background #mainplanet {

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%;
/ Remove the transform property /
}

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

With these changes, the Z-index property will now affect the positioning of the :before and :after pseudo-elements correctly, allowing the outside ring to appear behind the mainplanet circle.

The above is the detailed content of Why is my z-index not working on my :before and :after pseudo-elements?. For more information, please follow other related articles on the PHP Chinese website!