Home  >  Article  >  Web Front-end  >  Why is my z-index not working on my :before and :after pseudo-elements?

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

Susan Sarandon
Susan SarandonOriginal
2024-10-31 20:02:01482browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article:How Can I Add Padding to Inline Elements Without Creating Overlap?Next article:How Can I Add Padding to Inline Elements Without Creating Overlap?

Related articles

See more