Generare separatori di breadcrumb con css

- In questo articolo Gabriele Romanato ci mostra come risolvere mediante la creazione dinamica dei separatori, grazie alla proprietà content del css.
Generare separatori di breadcrumb con css

Soluzione per le briciole

Oltre alla creazione delle breadcrumb (briciole), anche per quella dei soli separatori bisogna affidarsi ad un programmatore o a chi ne sa più di noi sui vari linguaggi e via discorrendo. Tuttavia a monitor non risultano mai allineati al testo e sono sempre sproporzionati.

il codice HTML

Riproponiamo il codice di Gabriele Romanato html in questo modo:

<ul>
    <li><strong>Dove mi trovo:</strong></li>
    <li><a href="#">Pagina Uno</a></li>
    <li><a href="#">Pagina Due</a></li>
    <li><a href="#">Pagine Tre</a></li>
    <li><a href="#">Pagina Quattro</a></li>
    <li><strong>Mi trovo qui</strong></li>
</ul>

Il CSS

Per quanto riguarda la parte essenziale del css,  lo pseudo-elemento after, permette alla proprietà content di generare un contenuto dopo i tag li. In questo caso il codice unicode “3E” corrisponde al segno maggiore che spesso viene utilizzato come separatore tra le pagine visitate.

li:after {
    content: '3E';
    margin-left: 0.3em;
}

Creati gli indicatori, dobbiamo ora eliminarli dove non occorrono. Sempre con la proprietà content, e con l’aggiunta delle pseudo-classi first-child e last-child, generiamo un contenuto vuoto alla prima ed ultima voce della lista.

li:first-child:after, li:last-child:after {
    content: " ";
}

Provalo subito

Prova la demo Scarica il codice

3 commenti to “Generare separatori di breadcrumb con css”

  3. Pingback: CSS media print per la stampa | Laboratorio CSS

Lascia un commento!