Gli pseudo elementi CSS

Go to the profile of  Jacopo Kahl
Jacopo Kahl
2 min di lettura
Gli pseudo elementi CSS

Gli pseudo-elementi sono parole chiave che possono essere aggiunte ai selettori per renderli più specifici. Sono facili da riconoscere perché sono sempre preceduti da uno o due punti.

first-letter e first-line

Gli pseudo-elementi ::first-letter e ::first-line possono essere applicati agli stili
della prima lettera e della prima riga di un elemento. Funzionano solo su un blocco di elementi come i paragrafi.

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

La prima regola rende la lettera iniziale del paragrafo di colore bianco. Mentre la seconda trasforma la prima riga di testo del paragrafo in grassetto.

Possiamo inserire anche le classi e gli id:

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

before e after

Gli pseudo-elementi ::before e ::after possono creare del contenuto non presente in HTML e sono usati insieme alla proprietà content per inserire il contenuto prima o dopo un elemento.

p::before { content:"Prima "; }
p::after { content:" Dopo; }

Queste regole rendono il seguente paragrafo visualizzato come "Prima e Dopo":

<p>e</p>

La proprietà content è speciale, in quanto può essere utilizzata solo insieme
a questi due pseudo-elementi
. È anche l'unica proprietà che rompe le distinzioni nette tra HTML e CSS.

Tieni presente che l'utilizzo dovrebbe avvenire solo quando le scelte progettuali vengono cambiate e non si può solo agire altrimenti per aggiungere elementi alla pagina HTML. Un buon utilizzo potrebbe essere ad esempio l'aggiunta di un'icona dopo un elemento di testo in una voce di menu.

Possiamo con questa proprietà aggiungere gli elementi esterni tramite URL:

p.icon::after { content: url(icona.png); }

I quattro pseudo-elementi descritti finora sono stati introdotti in CSS 2, dove venivano usati solo attraverso un singolo segno (:). CSS 3 ha introdotto la notazione con il doppio punto (: :) per differenziare gli pseudo-elementi dalle pseudo-classi.

Il W3C ha deprecato l'uso della singola notazione dei due punti, ma tutti i principali browser continuano a supportare entrambe le sintassi.

.old:after {} /* CSS 2 */
.new::after {} /* CSS 3 */

Esiste anche un quinto pseudo-elemento ::selection. Come suggerisce il nome, questo pseudo-elemento può aggiungere stile al contenuto selezionato dall'utente.

Per la maggior parte dei browser questo pseudo-elemento è limitato a color e color-background.

::selection { background-color: red; }

Vuoi approfondire l'argomento? 🤓 + 📚 = 😄

Libro consigliato

Un modo nuovo e più bello per imparare HTML5 e CSS3.

Unità di misura in CSS
4 min di lettura
I Colori in CSS
3 min di lettura
Specificità in CSS
3 min di lettura
I selettori CSS di relazione
3 min di lettura