Come sostituisco con un’immagine il marcatore delle liste?

Utente HTML.it
chiede

Come sostituisco con un’immagine il marcatore delle liste?

Redazione HTML.it
risponde

Ci sono due modi. Il primo è usare la proprietà list-style-image, ecco un esempio:

ol{list-style-image: url(freccia.gif)}

Da notare che tra parentesi va specificato il nome del file (più eventualmente il percorso se l’immagine non
si trova nella stessa cartella del CSS).

Il secondo modo è in grado di controllare meglio l’allineamento dell’immagine, ma va usato solo
nel caso di elementi di lista al massimo di una riga, è specificare l’immagine attraverso il background:

ol{list-style-type: none;margin: 0;padding: 0}
li{padding-left: 10px;background: url(cerchio.jpg) no-repeat left center}

Da notare che il padding-left del list-item dovrà essere maggiore o uguale alla larghezza dell’immagine
del marcatore.