CSS: generare un'icona dopo l'ultimo paragrafo di un post

CSS: generare un'icona dopo l'ultimo paragrafo di un post

Il contenuto generato sta ormai mandando a riposo l'uso delle tradizionali icone CSS ottenute con immagini di sfondo. Vediamone un esempio pratico.

Vogliamo inserire un'icona di una foglia dopo l'ultimo paragrafo di un post. Ecco come possiamo fare:


article p:last-child:after {
       content: "\2766"; 
       font-size: 150%; 
       padding-left: 10px; 
       display: block;
       text-align: center;    
       position: relative; 
       top: 16px;
}​

L'icona viene generata utilizzando il codice Unicode corrispondente. Quando utilizzate questi caratteri speciali è sempre bene verificare in anticipo il supporto corrente nei browser.

Torna su