CSS Stepper - LI After overlaying LI Before

Question

I'm using some code found at codepen with a Stepper Control. I'm not vey skilled with CSS and I'm having an issue not presented in codepen, so I assume is another CSS class defined in a very long stylesheet that is shared with other team mates. The problem I tried to fix is that the line defined in the class .progressbar li:after remains above the class .progressbar li:before, that defines the circles.

li:after initially came with a z-index: -1 and li:before didn't have the z-index property, but the lines didn't appear, they were hidden behind a div, so I had to modify it and that's what is shown in the snippet. Although this z-index: -1 works in the snippet, is not working where I want to be implemented.

This first image shows the result of the CSS Stepper, taken directly from codepen to my page with z-index:-1

This other image shows the result after trying to adjust the z-index property:

This is the desired output:

Here's the snippet:

.container {
      width: 600px;
      margin: 100px auto; 
      z-index: -1;
  }
  .progressbar li {
      list-style-type: none;
      width: 25%;
      float: left;
      font-size: 12px;
      position: relative;
      text-align: center;
      text-transform: uppercase;
      color: #666666;
  }
  .progressbar li:after {
      width: 100%;
      height: 2px;
      content: '';
      position: absolute;
      background-color: #666666;
      top: 15px;
      left: -50%;
      display: block;
      z-index: 1;
  }
  .progressbar li:before {
      width: 30px;
      height: 30px;
      content: '';
      line-height: 30px;
      border: 2px solid #666666;
      display: block;
      text-align: center;
      margin: 0 auto 10px auto;
      border-radius: 50%;
      background-color: white;
      z-index: 999999;
  }
  .progressbar li:first-child:after {
      content: none;
  }
  .progressbar li.active {
      color: green;
  }
  .progressbar li.active:before {
      border-color: #55b776;
  }
  .progressbar li.active + li:after {
      background-color: #55b776;
  }

<div class="container">
      <ul class="progressbar">
          <li >aaaaaa</li>
          <li class="active">bbbbbbbbbt</li>
          <li>cccccccc</li>
          <li>ddddddddd</li>
  </ul>
  </div>

¿Could I get some help to solve this problem, or where could I start looking?

I think it's all said, but please, if I left something, I'll try to complete the post.

Thanks in advance,

Have you used your browser's devtools inspect facility to see exactly what CSS is being applied (and where it comes from)? — A Haworth
whats your desired output? what do you want the final result to look like? — Sigurd Mazanti
I've edited the post with the desired output, Sigurd. Haworth, I'm not very skilled. I've tried some playing with the dev tools, marking and demarking some properties, but I still don't know why is showing the lines above the circles. I thought it had to do with the z-index properties, but I've also failed trying to fix it that way., — Ruben
CBroe, that was my fault. I was taking screenshots, and left the code with the incorrect value for z-index. The problem is z-index:-1 doesnt work for me, maybe because of a conflict with another css. — Ruben

Sigurd Mazanti Sigurd Mazanti · Accepted Answer · 2022-05-09T08:52:00

You must give the element a position-value in order to use z-index. Just apply position: relative; to the .progressbar li:before-element:

.container {
  width: 600px;
  margin: 100px auto;
}

.progressbar li {
  list-style-type: none;
  width: 25%;
  float: left;
  font-size: 12px;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  color: #666666;
}

.progressbar li:after {
  width: 100%;
  height: 2px;
  content: '';
  position: absolute;
  background-color: #666666;
  top: 15px;
  left: -50%;
  display: block;
}

.progressbar li:before {
  width: 30px;
  height: 30px;
  content: '';
  line-height: 30px;
  border: 2px solid #666666;
  display: block;
  text-align: center;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  background-color: white;
  position: relative;
  z-index: 1;
}

.progressbar li:first-child:after {
  content: none;
}

.progressbar li.active {
  color: green;
}

.progressbar li.active:before {
  border-color: #55b776;
}

.progressbar li.active+li:after {
  background-color: #55b776;
}

<div class="container">
  <ul class="progressbar">
    <li>aaaaaa</li>
    <li class="active">bbbbbbbbbt</li>
    <li>cccccccc</li>
    <li>ddddddddd</li>
  </ul>
</div>

CSS Stepper - LI After overlaying LI Before

2 Answers