html - :before 列表的 CSS 增量计数器

Question

我尝试使用 CSS 增加列表的计数器。但是，即使我可以看到列表编号，它们也不会递增。

我使用了 :before 和 CSS 属性 counter。这是代码:

.services__details--content__step>ul>li:before {
  content: counter(counter);
  counter-increment: counter;
  color: #0052ff;
  background-color: #e8effe;
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  border-radius: 50%;
}

<div class="services__details--content__step">
  <h2 class="services__details--content__title">
    Les Étapes de la Création du Site
  </h2>
  <ul>
    <li>
      Évaluation du Projet
      <p class="services__details--content__desc">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer.
      </p>
    </li>
    <li>
      Conception et Érgonomie UX
      <p class="services__details--content__desc">
        Took a galley of type and scrambled it to make a type specimen book. survived not only five centuries, but also the leap into electronic remaining.
      </p>
    </li>
  </ul>
</div>

Answer 1

您需要先将计数器设置为 0。您唯一需要做的就是添加:

body {
  /* Set "counter" to 0 */
  counter-reset: counter;
}

.services__details--content__step>ul>li:before {
  content: counter(counter);
  counter-increment: counter;
  color: #0052ff;
  background-color: #e8effe;
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  border-radius: 50%;
}

body {
  /* Set "counter" to 0 */
  counter-reset: counter;
}

ul {
  list-style: none;
}

<div class="services__details--content__step">
  <h2 class="services__details--content__title">
    Les Étapes de la Création du Site
  </h2>
  <ul>
    <li>
      Évaluation du Projet
      <p class="services__details--content__desc">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer.
      </p>
    </li>
    <li>
      Conception et Érgonomie UX
      <p class="services__details--content__desc">
        Took a galley of type and scrambled it to make a type specimen book. survived not only five centuries, but also the leap into electronic remaining.
      </p>
    </li>
  </ul>
</div>