CSS3计数器 - 不显示数字而递增

Question

是否可以在不显示数字的情况下使css3计数器自行递增？

我使用步骤，当步骤完成时，我想在::before内容中显示另一个内容（如字体 - 真棒图标）。它可以工作，但是如果我不写content: counter(step);那么这个数字不会增加，而我之后的所有步骤都有错误的数字。

我尝试了一些东西，但我不在这里。你知道如何正确递增counter而不显示数字吗？`

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

您可以尝试content: counter(step, none);。现场演示here。