Increment Counter in CSS for a list with :before

Question

I tried to increment a counter for a list with CSS. However, even though I can see the list numbers, those don't increment.

I used :before and the CSS property counter. Here's the code:

.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>

You need to increment the counter on the `li` themselves, not the `li:before` pseudo element. There is only one of those in each of their respective parents, so "counting" those will always result in 1. — CBroe, Jan 30 '23 at 13:23

score 4 · Accepted Answer · edited Jan 31 '23 at 00:36

You need to set the counter to 0 first. The only thing you need to do is add:

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>

score 2 · Answer 2 · edited Jan 31 '23 at 00:39

2

You need counter-reset.

body {
   counter-reset: counter;
}

edited Jan 31 '23 at 00:39

Michael M.

10,486
9
18
34

answered Jan 30 '23 at 13:26

E-g

524
2
12

Increment Counter in CSS for a list with :before

2 Answers2