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,

Answer 1

You just need to reduce the z-index of .progressbar li:after like this (no other changes required ):

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

You can see it working below:

 .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: -999999; }.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>

Answer 2

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>