Lista ordenada personalizable con CSS

palabras / Facebook / Twitter / Enlace / Comentar

Seguramente más de una vez te has encontrado en la necesidad de personalizar los apuntadores de una lista, ya sea a través de un icono como de un texto, pero ¿cómo aplicarías estilos al número de una lista ordenada?

Counter-increment & reset

Existen dos propiedades de CSS 2.1 llamadas counter-increment y counter-reset, estas nos ayudarán a generar el número de una lista para ser capaces de aplicarle un estilo o un texto.

  1. Primer elemento
  2. Segundo elemento
  3. Tercer elemento
  4. Cuarto elemento
  5. Quinto elemento

La magia sucede directamente en el CSS. Nuestro código HTML es el siguiente:

<ol class="lista">
    <li>Primer elemento</li>
    <li>Segundo elemento</li>
    <li>Tercer elemento</li>
    <li>Cuarto elemento</li>
    <li>Quinto elemento</li>
</ol>

Y nuestro CSS el siguiente:

ol.lista {
  counter-reset: li;
  list-style: none;
}
ol.lista > li:before {
  counter-increment: li;
  content: '·' counter(li) ' ';
  color: gray;
  font-size: 2em;
}

¿Qué estamos haciendo aquí?

En el markup HTML estamos generando una lista ordenada <ol></ol> a la cual le estamos asignando una clase llamada lista.

En nuestro CSS lo primero que estamos haciendo es asignarle la propiedad counter-reset a nuestra lista ordenada ol.lista especificando qué elemento será el que se contará, en este caso es un li. Esta propiedad sirve básicamente para resetear o comenzar contar una lista.

Inmediatamente quitamos los números que nos dan las listas por defecto con list-style.

En la siguiente sección estamos apuntando al hijo li más próximo a ol.lista y agregando estilo antes :before de este ol.lista > li:before.

Después aplicamos la propiedad counter-increment para especificar qué elemento será el que se contará li.

Agregaremos contenido con content, en este caso primero agregamos un punto '·', después el contador reseteado y generado con counter(li) y al final un espacio ' '.

Después nos enfocamos a darle estilos a nuestro contador.

Soporte

Conclusión

W3schools tiene un ejemplo muy bueno acerca de esta función. Ya no mas listas clásicas, desde hace mucho somos capaces de crear listas mas personalizadas.


Comentarios

Copyright © 2012-2013 AbarcaRodriguez.com