Gli pseudo-elementi in CSS, 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.
Indice
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; }
