CSS3 counter - Increment without displaying the number

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.