Contadores en CSS – PC Solución

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

text

<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

text

ul {
  counter-reset: counter;
}

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

Resultado

Explicación

[table id=20 /]

Puedes probar este código en nuestra herramienta:

Editor Online