Cuando creamos una lista en HTML, por cada elemento de la lista, podemos detectar dos partes: la marca o hito que inicia el elemento y el texto del item de la lista. Gracias a CSS podemos conseguir que los hitos de las listas sean imágenes, incrementando así el número de iconografías ofrecidas por la especificación de HTML, que por defecto son circulo, cuadrado y elipse.
Para tener imágenes como hitos de listas con CSS lo primero que tenemos que hacer es crear una lista. Para ello creamos una lista desordenada, mediante el elemento ul. El código HTML será el siguiente:
<ul> <li>Elemento 1</li> <li>Elemento 2</li> <li>Elemento 3</li> <li>Elemento 4</li> <li>Elemento 5</li> <li>Elemento 6</li> <li>Elemento 7</li> </ul>
Vemos que cada uno de los elementos de la lista es especificado utilizando el elemento li, que nos sirve de igual forma para listas ordenadas o desordenadas.
Lo siguiente será el pasar a modificar el hito de cada uno de los elementos. Para poner una imagen en el hito del item de la lista utilizaremos la propiedad CSS list-style-image. La estructura de la propiedad list-style-image es la siguiente:
list-style-image : <uri> | none | inherit
De esta manera nuestro código quedará de la siguiente forma:
ol {
list-style-image: url('documento.gif');
}
El nombre del fichero que contiene la imagen deberá de especificarse mediante una URI. Para ello nos apoyamos en la función url(), la cual recibe como parámetro la url en la que se encuentra el fichero. La URL podrá ser relativa (../imagenes/documento.gif)) o absoluta (https://lineadecodigo.com/imagenes/documento.gif).
Si utilizamos imágenes como hitos podemos tomar la precaución de especificar un estilo sobre los items por si acaso el navegador no encuentra el fichero con la imagen. Los estilos CSS los especificamos mediante la propiedad list-style-type. De esta manera aumentaremos la definición de nuestro elemento que quedará de la siguiente forma:
ol {
list-style-image: url('documento.gif');
list-style-type: square;
}
Y este código tan sencillo nos sirve para tener imágenes como hitos de listas con CSS. ¿Habéis utilizado o tenéis pensando utilizar alguna vez imágenes como hitos de listas? Si es así, cuéntanos tu experiencia en los comentarios de la página. Estaremos ilusionados de conocer vuestras experiencias.
