CSS 中的增量計數器用於列表：之前

Question

我試圖為 CSS 的列表增加一個計數器。但是，即使我可以看到列表編號，它們也不會增加。

我用過:before和 CSS property 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>

Answer 2

你需要counter-reset 。

body {
   counter-reset: counter;
}