title: Changing stacking order for CSS pseudo element
body: <p>I am in the process of designing a 3 stage progress bar in pure CSS.  My current effort is shown below.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#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;
   
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div id='progBar'&gt;
      &lt;div id='cOne'&gt;
       &lt;span class='progcapt'&gt;1&lt;/span&gt;
       &lt;div id='cOneRing'&gt;&amp;nbsp;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The intent here is this</p>
  
  <ul>
  <li>There will be three disc, one for each step</li>
  <li>I am using the central disc as my "anchor"</li>
  <li>Each disc is shown with an annular border which I create by absolutely positioning the disc and making the annulus its child.</li>
  <li>The <code>::before</code> pseudo-element for this anchor is used to create the track for the progress bar</li>
  <li>The ensemble - the three circles and the track - are placed in an relatively positioned rectangular bar which acts as the background</li>
  </ul>
  
  <p>The issue I have run into - I thought I would be able to send the track bar <strong>behind</strong> 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.</p>