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

guest
0 Comentarios
Inline Feedbacks
Ver todos los comentarios
La Coruña, España Correo mail