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?
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.
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; }
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.
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.
Copyright © 2012-2013 AbarcaRodriguez.com