Gli pseudo-elementi

Vi sono parti in un documento HTML che non sono rappresentate da nessun elemento in particolare, ma che è possibile comunque modificare e formattare secondo i propri desideri con i CSS grazie ai cosiddetti pseudo-elementi. Il nome un po' criptico può essere così spiegato: nel momento in cui in un foglio di stile si costruisce una regola che ad essi fa riferimento, è come se nel documento venissero inseriti nuovi elementi che hanno la caratteristica di essere appunto fittizi, presenti nel CSS ma non nel codice che definisce la struttura della pagina. Analizziamoli uno per uno.

:first-letter

Con questo selettore è possibile formattare la prima lettera di qualunque elemento contenente del testo. Le proprietà modificabili sono ovviamente tutte quelle relative al carattere e al testo, ma anche quelle legate al colore, allo sfondo, ai margini, ai bordi e al padding.

Sintassi ed esempi

La sintassi di tutti gli pseudo-elementi è soggetta alla stesse regole. La più importante è che essi non possono essere dichiarati da soli, ma vanno sempre collegati ad altri selettori.

selettore:pseudo-elemento {dichiarazioni;}

Non importa di che tipo siano i selettori. La definizione più semplice è quella che prevede l'applicazione di uno pseudo-elemento a un selettore di tipo:

p:first-letter {color: white; font-weight: bold;}

È possibile anche usare classi:

p.classe:first-letter {color: white; font-weight: bold;}

O selettori di id:

p#id:first-letter {color: white; font-weight: bold;}

Per tutte le regole usate negli snippet di codice, il testo degli elementi presenterà la prima lettera bianca e in grassetto.

Esempio.

:first-line

Imposta lo stile della prima riga di un elemento contenente del testo.

Sintassi ed esempi

Valgono le stesse regole generali viste per :first-letter.

p:first-line {color: white; }
p.classe:first-letter {color: white; font-weight: bold;}
p#id:first-letter {color: white; font-weight: bold;}

Esempio.

:before, :after e il contenuto generato

Tra gli pseudo-elementi, quelli che meritano una menzione speciale e che hanno il più ampio utilizzo sono :before e :after. Grazie a questi pseudo-elementi è possibile inserire nel documento HTML un contenuto non presente nel documento stesso.

Più precisamente:

Pseudo-elemento	Descrizione
:before	inserisce un altro elemento all'inizio del contenuto dell'elemento individuato dal selettore
:after	inserisce un elemento a chiudere il contenuto dell'elemento individuato dal selettore

Quanto inserito con i due pseudo-elementi viene definito contenuto generato.

Spieghiamo meglio queste definizioni. Possiamo anzitutto indicare quale contenuto vada aggiunto grazie alla proprietà CSS content e può essere una semplice stringa di testo, un URL che punti a un'immagine o a un altro documento, un contatore numerico, semplici virgolette, il riferimento al valore di un attributo HTML identificato con un selettore di attributo.

Inoltre come vedremo, possiamo indicare anche un box generico al quale possono essere applicate svariate proprietà CSS. Quest'ultima opzione rende questa tecnica estremamente versatile e potente. Per un campionario di modi di utilizzo si faccia riferimento alla lista con gli approfondimenti posta in fondo a questa lezione.

Sintassi ed esempi

Finalmente scendiamo in dettaglio sul codice. La sintassi generica per l'uso di :before, :after e del contenuto generato è questa:

elemento:before {content: "contenuto";}
elemento:after {content: "contenuto";}

Mai come in questo caso, gli esempi sono utili per chiare meglio i concetti teorici.

Partiamo dal caso più semplice. Immaginiamo di voler inserire un numero prima di un titolo h3. Useremo in questo modo lo pseudo-elemento :before:

h3:before {content: "1 ";}

La stringa di testo va racchiusa tra virgolette; se si vuole mettere separare il contenuto generato dall'elemento si deve inserire uno spazio prima delle virgolette di chiusura.

Se volessimo inserire il numero dopo il titolo h3, useremo :after:

h4:after {content: " 1";}

In questo caso, per separare, lo spazio va dopo le virgolette di apertura.

Vediamo ora come inserire un'immagine prima di un link usando l'URL dell'immagine:

a:before {content: url(logo.png);}

Fin qui le basi. Verifichiamo ora come il contenuto generato possa essere formattato usando altre proprietà CSS. Inseriremo di nuovo un numero e il testo apparirà su un box largo e altro 30px; con lo sfondo rosso, sarà bianco e con una dimensione del testo di 22px:

h3.numero:before {
content: "1 ";
display: inline-block;
width: 30px;
height: 30px;
background: red;
padding: 3px;
margin-right: 5px;
color: white;
font-size: 22px;
}

Nell'ultima dimostrazione vediamo come creare dei box generici e formattati. Basterà lasciare vuoto il valore per la proprietà content, impostare un valore per la proprietà display e usare altre proprietà CSS per definire l'aspetto del box. Qui inseriamo un quadrato prima del titolo h3:

h3.box:before {
content: " ";
display: inline-block;
width: 70px;
height: 30px;
background: red;
padding: 3px;
border: 2px solid black;
margin-right: 5px;
}

Esempio.

Approfondimenti sul contenuto generato

• Usare :before e :after per personalizzare radio buttons e checkbox dei form
• Sfondi più flessibili con il contenuto generato
• Liste ordinate, formattare i numeri con i CSS
• Usare il contenuto generato per creare un effetto 'pagina arricciata' con ombreggiatura
• Il posizionamento del contenuto generato da CSS