list-style-image

Qualora non ti piacciano gli stili predefiniti delle liste, puoi utilizzare anche un’immagine per definire il tuo punto di lista.

li{
   list-style-image: url(images/bullet_list.gif);
}

Attenzione però: in alcuni casi devi stare molto attento a questo. Ad esempio, se imposti un’altezza definita per gli elementi di lista, potresti avere alcuni problemi ad utilizzare un’immagine, così come, se hai un’immagine più grande dell’altezza del contenuto dell’elemento. Per ovviare a questo, solitamente utilizzo un background-image sull’elemento, oppure con :before posso personalizzarlo al meglio… ma di questo parleremo meglio nel capitolo 7 “Pillole di utilità”.

Ricorda, inoltre, di definire anche il list-style-type prima dell’immagine. In questo modo, se un browser non carica le immagini, l’utente potrà capire comunque che quell’elemento è una lista.

Un esempio potrebbe essere questo: