Changing stacking order for CSS pseudo element - css

Question

I am in the process of designing a 3 stage progress bar in pure CSS. My current effort is shown below.
#progBar
{
background-color:#bdbdbd;
padding:1.5vw;
position:relative;
height:9vw;
}
.progcapt
{
background-color: #526cfd;
color: transparent;
text-shadow: 0px 2px 3px #526cfd;
-webkit-background-clip:text;
font-family:'arial black';
font-size:3vw
}
#cOne
{
position:absolute;
left:calc(50% - 2.5vw);
top:calc(50% - 2.5vw);
border-radius:5vw;
height:5vw;
width:5vw;
border:1px solid #526cfd;
text-align:center;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0px 0px 3vw #526cfd;
background-color:white;
}
#cOne::before
{
position:absolute;
width:50vw;
height:1vw;
background-color:rgba(82,108,253,0.5);
content:'';
/*z-index:-1; does not give the expected result*/
}
#cOneRing
{
position:absolute;
top:-calc(0.5vw + 1px);
left:-calc(0.5vw + 1px);
width:6vw;
height:6vw;
border:1px solid #526cfd;
border-radius:6vw;
}
<div id='progBar'>
<div id='cOne'>
<span class='progcapt'>1</span>
<div id='cOneRing'> </div>
</div>
</div>
The intent here is this
There will be three disc, one for each step
I am using the central disc as my "anchor"
Each disc is shown with an annular border which I create by absolutely positioning the disc and making the annulus its child.
The ::before pseudo-element for this anchor is used to create the track for the progress bar
The ensemble - the three circles and the track - are placed in an relatively positioned rectangular bar which acts as the background
The issue I have run into - I thought I would be able to send the track bar behind its parent disc element by setting its z-index attribute to -1. However, that simply causes it to disappear altogether. Clearly, I am doing something wrong here but I am unable to spot what that might be. Hopefully, someone here will be able to spot the error.

Answer 1

As far as I understood you need this
#progBar {z-index: -2;}
#cOne::after { z-index: -1;}
#progBar
{
z-index: -2;
background-color:#bdbdbd;
padding:1.5vw;
position:relative;
height:9vw;
}
.progcapt
{
background-color: #526cfd;
color: transparent;
text-shadow: 0px 2px 3px #526cfd;
-webkit-background-clip:text;
font-family:'arial black';
font-size:3vw
}
#cOne
{
position:absolute;
left:calc(50% - 2.5vw);
top:calc(50% - 2.5vw);
border-radius:5vw;
height:5vw;
width:5vw;
border:1px solid #526cfd;
text-align:center;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0px 0px 3vw #526cfd;
background-color:white;
}
#cOne::before
{
position:absolute;
width:50vw;
height:1vw;
background-color:rgba(82,108,253,0.5);
content:'';
z-index:-1;
}
#cOneRing
{
position:absolute;
top:-calc(0.5vw + 1px);
left:-calc(0.5vw + 1px);
width:6vw;
height:6vw;
border:1px solid #526cfd;
border-radius:6vw;
}
<div id='progBar'>
<div id='cOne'>
<span class='progcapt'>1</span>
<div id='cOneRing'> </div>
</div>
</div>