Dfyjkt

I'm trying to set up a little step progress bar that only has an icon for the current step. I've gotten so far as to have a default icon of sorts, but can't figure out how to clear it for non-active steps.

In the code below, I tried playing with pseudo classes but that didn't seem to work. I'm wondering if anyone can point me in the right direction. Thanks!

 .step-indicator-container 
 width: 600px;
 margin: 100px auto;
 

 .step-indicator li 
 list-style-type: none;
 width: 33.33%;
 float: left;
 font-size: 12px;
 position: relative;
 text-align: center;
 text-transform: uppercase;
 color: #7d7d7d;
 

 .step-indicator li:before 
 font-family: "FontAwesome";
 content: "f276";
 width: 30px;
 height: 30px;
 line-height: 30px;
 border: 2px solid #7d7d7d;
 display: block;
 text-align: center;
 margin: 0 auto 10px auto;
 border-radius: 50%;
 background-color: white;
 

 .step-indicator li:after 
 width: 100%;
 height: 2px;
 content: "";
 position: absolute;
 background-color: #7d7d7d;
 top: 15px;
 left: -50%;
 z-index: -1;
 

 .step-indicator li:not(.active):nth-of-type(2) > *::before 
 content: none;
 

 .step-indicator li:first-child:after 
 content: none;
 

 .step-indicator li.active 
 color: #0052e7;
 

 .step-indicator li.active:before 
 border-color: #0052e7;
 

 .step-indicator li.active+li:after 
 background-color: #0052e7;
 

For this answer, I am assuming the following is your HTML structure:

<div class="step-indicator-container">
 <ul class="step-indicator">
 <li></li>
 <li class="active"></li>
 <li></li>
 </ul>
</div>

The issue is with the following declaration:

.step-indicator li:not(.active):nth-of-type(2) > *::before 
 content: none;

This is targeting the ::before of a descendant of the li tag. However, you actually put your symbol on the ::before of the li tag itself, not a descendant. Therefore, that's what you need to be targeting. Furthermore, content: none eliminates the ::before, so you actually want content: "". Here's what I think you actually want:

.step-indicator li:not(.active)::before 
 content: "";

And here's the full code snippet (note I replaced your symbol with the $):

.step-indicator-container 
 width: 600px;
 margin: 100px auto;


.step-indicator li 
 list-style-type: none;
 width: 33.33%;
 float: left;
 font-size: 12px;
 position: relative;
 text-align: center;
 text-transform: uppercase;
 color: #7d7d7d;


.step-indicator li:before 
 content: "$";
 width: 30px;
 height: 30px;
 line-height: 30px;
 border: 2px solid #7d7d7d;
 display: block;
 text-align: center;
 margin: 0 auto 10px auto;
 border-radius: 50%;
 background-color: white;


.step-indicator li:after 
 width: 100%;
 height: 2px;
 content: "";
 position: absolute;
 background-color: #7d7d7d;
 top: 15px;
 left: -50%;
 z-index: -1;


.step-indicator li:not(.active)::before 
 content: "";


.step-indicator li:first-child:after 
 content: none;


.step-indicator li.active 
 color: #0052e7;


.step-indicator li.active:before 
 border-color: #0052e7;


.step-indicator li.active+li:after 
 background-color: #0052e7;

<div class="step-indicator-container">
 <ul class="step-indicator">
 <li></li>
 <li class="active"></li>
 <li></li>
 </ul>
</div>