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