Personalizzare il colore dei list-item

Un metodo per personalizzare i bullet delle liste è quello di nascondere quelli originali e inserire i nuovi un content generato via CSS con all’interno un simbolo in unicode che può essere lo stesso o un altro. Nell’esempio che segue abbiamo inserito un quadrato e gli abbiamo assegnato il colore rosso. Se vuoi garantirti anche la compatibilità per IE7 leggi quest’altro articolo.

ul {
    list-style: outside none;
    padding:0;
    margin:0;
}

li { 
    padding-left: 1em; 
    text-indent:-.7em;
}

li:before {
    content: "\25A0"; 
    color:red;
    padding-right:.5em;
}
Vai all'archivio
Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github