title: Step Progress Bar Icons
body: <p>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. </p>
  
  <p>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!</p>
  
  <pre><code>    .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) &gt; *::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;
      }
  </code></pre>