CSS3 counter - Increment without displaying the number - css

Question

Is it possible to make a css3 counter increment itself without displaying the number?
I use steps and when a step is done I want to display another thing in the ::before content (like a font-awesome icon). It works but if I don't write content: counter(step); then the number is not incremented and all my steps after have a wrong number.
I tried a few things but I'm out of idea here. Do you know how to increment correctly the counter without displaying the number itself?`
li {
list-style-type: none;
color: $gray-dark;
font-size: 12px;
width: 33.33%;
float: left;
position: relative;
line-height: 1;
&:after {
content: '';
width: 100%;
height: 2px;
background: $gray-darker;
position: absolute;
left: -50%;
top: 12px;
z-index: 99; /*put it behind the numbers*/
}
&:before {
#include border-radius(15px);
content: counter(step);
counter-increment: step;
width: 28px;
height: 28px;
line-height: 20px;
display: block;
font-size: 12px;
color: $white;
font-weight: bold;
background: $gray-dark;
margin: 0 auto 5px auto;
position: relative;
z-index: 100 !important;
padding-top: 3px;
border:1px solid $gray-darker;
}
&:first-child:after {
// connector not needed before the first step
content: none;
}
&.question {
&:before {
content: '?';
background: $blue-lighter;
}
}
/**
* Specific classes for <li> element.
*/
&.active {
color: $gray-darker;
&:before {
background-color: $orange;
}
}
&.success {
#extend .fa;
color: $gray-darker;
&:before {
background-color: $green-check;// I can't set a content: '\f00c' to get a fa icon.
}
}
}

Answer 1

You can try content: counter(step, none);. Live demo here.