Il contenuto generato CSS viene correntemente supportato da tutti i browser moderni. La cosa interessante del contenuto generato è sicuramente la gamma di caratteri che possiamo inserire. Non solo sono supportati i caratteri alfabetici, ma anche una serie di caratteri speciali decorativi appartenenti al range Unicode (che, ricordiamolo, supporta più di 650000 caratteri). In questo articolo vedremo come realizzare un separatore orizzontale (hr) utilizzando il contenuto generato.
Sull'elemento principale faremo in modo che l'interlinea venga azzerata in modo da avere i due simboli sopra la riga disegnata con il colore di sfondo e l'altezza di un pixel.
Centreremo i due simboli con l'allineamento del testo e il posizionamento relativo. Ecco il codice:
hr {
background-color:#999;
border-width:0;
color:#999;
height:1px;
line-height:0;
margin: 0.5em 0;
text-align: center;
}
hr:after {
content:"\a7\a7";
font-size:1.25em;
position: relative;
left: -0.5em;
}
Potete visionare l'esempio finale in questa pagina.