Contadores en CSS

CSS febrero 12, 2019

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
[table id=20 /]

 

Puedes probar este código en nuestra herramienta:

Editor Online



Relacionados



Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

La Coruña, España Correo