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.

Torna su