A los elementos de lista se les pueden añadir por CSS bullets, números, letras, etc. que les precedan cuando son visualizados en el navegador, mediante la propiedad ‘list-style’, o bien asignarles una imagen de fondo mediante la propiedad ‘background’.
Cuando se trata de listas ordenadas lo habitual es utilizar números:
ol li {list-style:decimal;}Los números de la lista ordenada llevarán el mismo estilo que el elemento LI. Pero puede ocurrir que se quiera que los números tengan un estilo distinto, por ejemplo que, a diferencia del texto, vayan en negrita:
En este caso habría que complicar el HTML:
<li><span>[Texto]</span></li>Y aplicar los estilos del siguiente modo:
ol li {font-weight:bold;} ol li span {font-weight:normal;}Si es un HTML generado por servidor, no hay problema. Pero, ¿y si se trata de HTML introducido mediante publicación de contenidos? Será más difícil de introducir.
Existe otra alternativa, sin complicar el HTML:
<li>[Texto]</li>Y en CSS:
ol {counter-reset: item; padding-left:20px;} ol li {list-style-type:none;} ol li:before {content: counter(item) ". "; counter-increment: item; margin-left:-16px; font-weight:bold;}Lo que se ha hecho es:
- Introducir un contador ‘item’ (se puede nombrar como se quiera) que se resetea al comenzar el elemento OL.
- Eliminar los estilos de lista en el LI.
- Uso del pseudo-elemento ‘before’ en el LI para introducir los números con el formato deseado (incrementando el valor del número para el siguiente LI dentro de un mismo OL).
- Hay un ‘padding’ y un ‘margin’. Esto habrá que ajustarlo (o quitarlo) según sea necesario en cada caso.
Problema: en Internet Explorer 7 y anteriores no funciona, con el estilo anteriormente expuesto no saldrían los números asociados a los elementos. Habría que cambiar un poco el estilo:
ol {padding-left:20px;} html>/**/body ol {counter-reset: item; } ol li {list-style-type:decimal;} html>/**/body ol li {list-style-type:none;} ol li:before {content: counter(item) ". "; counter-increment: item; margin-left:-16px; font-weight:bold;}En IE7 y anteriores la lista se verá sin las negritas en los números, y en IE8 y superiores, y el resto de navegadores, se verán los números en negrita.