SCSS - progress steps with CSS

Question

#my-property {
	$white: #fff;
	$grey-light: #ededed;
	%remain-steps{ //steps
	  &:before {
	    content: counter(stepNum);
	    font-family: inherit;
	    font-weight: 700;
	  }
	  &:after{
	    background-color: $grey-light;
	  }
	}
	.multi-steps{
	  display: table;
	  table-layout: fixed;
	  width: 100%;
	  > li{
	    counter-increment: stepNum;
	    text-align: center;
	    display: table-cell;
	    position: relative;
	    color: $color-success;

	    &:before{
	      display: block;
	      margin: 0 auto 4px;
	      background-color: $white;
	      width: 80px;
	      height: 80px;
	      line-height: 80px;
	      text-align: center;
	      font-weight: bold;
	      border:{
	        width: 2px;
	        style: solid;
	        color: $color-success;
	        radius: 50%;
	      }
	    }
	    &:after{
	      content: '';
	      height: 2px;
	      width: 100%;
	      background-color: $color-success;
	      position: absolute;
	      top: 40px;
	      left: 50%;
	      z-index: -1;
	    }
	    &:last-child{
	      &:after{
	        display: none;
	      }
	    }

	    &.is-active{
	      @extend %remain-steps;
	      &:before{
	        background-color: $color-success;
	        color: #fff;
	        border-color: $color-success;
	      }

	      ~ li{
	        color: #808080;
	        @extend %remain-steps;
	        &:before{
	          background-color: $grey-light;
	          border-color: $grey-light;
	        }
	      }
	    }
	   // &.fa {
	   // 	font-size: 3.5rem;
	   // 	line-height: 0.5;
	   // }
	   // &.booked {
	   // 	&:before {
	   // 		content: "\f046"!important;
	   // 	}
	   // }
	   // &.s-p {
	   // 	&:before {
	   // 		content: "\f0f6"!important;
	   // 	}
	   // }
	   // &.stamping {
	   // 	&:before {
	   // 		content: "\f0a3"!important;
	   // 	}
	   // }
	   // &.vp {
	   // 	&:before {
	   // 		content: "\f084"!important;
	   // 	}
	   // }
	  }
	  .steps-label {
	  	font-family: $base-font-family;
	  	font-size: 14px;
	  }
	}
}

<ul class="list-unstyled multi-steps">
    <li class="fa booked"><span class="steps-label">Booked</span></li>
    <!--is-active class indicate the active behaviour-->
    <li class="fa s-p is-active"><span class="steps-label">S & P</span></li>
    <li class="fa stamping"><span class="steps-label">Stamping</span></li>
    <li class="fa vp"><span class="steps-label">VP</span></li>
</ul>