CSS: marcatori di lista triangolari con il contenuto generato

Fare a meno delle immagini è sempre stato il sacro Graal dei CSS. Con il contenuto generato possiamo infatti eliminare tutti quei piccoli ornamenti un tempo realizzati con delle icone per fare spazio a del contenuto creato interamente con i CSS. In questo esempio vedremo dei marcatori di lista trinagolari creati con i bordi trasparenti e il contenuto generato.

Il seguente codice si applica a qualsiasi lista:

ul {
    margin: 0.75em 4em;
    padding: 0 1em;
    list-style: none;
    font-family: Arial, sans-serif;
}
li:before {
    content: "";
    border-color: transparent #333;
    border-style: solid;
    border-width: 0.35em 0 0.35em 0.45em;
    display: block;
    height: 0;
    width: 0;
    left: -1em;
    top: 0.9em;
    position: relative;
    font-size: 0.9em;
    border-radius: 2px;
    box-shadow: inset 1px 1px 1px #666;
}

I bordi trasparenti creano l'effetto del triangolo. Il contenuto generato crea semplicemente un piccolo box vuoto a cui si andranno ad applicare gli altri stili. Potete visionare l'esempio finale in questa pagina.