Uno pseudo-elemento in CSS è una parola chiave aggiunta a un selettore che permette di stilizzare una specifica parte di un elemento selezionato. Si usa per aggiungere un testo o uno stile speciale a un elemento senza dover modificare il markup HTML o XML.
Gli pseudo-elementi sono spesso utilizzati per aggiungere elementi decorativi, come le virgolette attorno a un blocco di citazione, o per applicare stili a una parte specifica di un testo, come la prima lettera di un paragrafo.
Sono preceduti da due “due punti” (::), ad esempio ::before, ::after, ::first-letter ecc.
- ::before crea un nodo figlio fittizio che viene posizionato prima dei contenuti effettivi dell’elemento.
- ::after crea un nodo figlio fittizio che viene posizionato dopo i contenuti dell’elemento.
- ::first-letter seleziona la prima lettera di ogni paragrafo (o altro blocco di testo) nell’elemento selezionato.
Gli pseudo-elementi sono molto potenti e permettono di fare molto senza dover manipolare il DOM con JavaScript o modificare l’HTML esistente.
