Contadores en CSS

Los contadores en CSS pueden ser especialmente útiles para hacer listas resumidas. Estos son, en esencia, variables mantenidas por CSS cuyos valores pueden ser incrementados por las reglas de CSS para rastrear cuántas veces se usan.

Veamos su uso con un ejemplo:

HTML

<ul>
  <li>Texto Aleatorio</li>
  <li>Texto Aleatorio</li>
  <li>
   Texto Aleatorio
    <ul>
      <li>Texto Aleatorio</li>
      <li>Texto Aleatorio</li>
      <li>Texto Aleatorio</li>
      <li>Texto Aleatorio</li>
    </ul>
  </li>
</ul>

CSS

ul {
  counter-reset: counter;
}

li::before {
  counter-increment: counter;
  content: counters(counter, '.') ' ';
}

Resultado

Explicación

Puedes probar este código en nuestra herramienta:

Editor Online