Gli pseudo-elementi in CSS

Gli pseudo-elementi in CSS sono un tipo speciale di selettore che ti permette di aggiungere uno stile a parti specifiche di un elemento HTML, ad esempio alla prima lettera di un testo o alla prima riga.

La sintassi di uno pseudo-elemento è: elemento::pseudo-elemento { ... }. Elemento è facoltativo.

Vediamo l'elenco degli pseudo-elementi:

Vediamoli, uno ad uno, in dettaglio.

Lo pseudo-elemento ::first-line

Lo pseudo-elemento ::first-line permette di applicare stili specifici solo alla prima riga di un elemento block (se non la conosci, leggi la differenza tra elementi block e inline), ad esempio di un <p> o un <div>.

<div>Lorem ipsum odor amet,<br>consectetuer adipiscing elit...</div>

<style>
div::first-line {
  background-color: yellow;
}
</style>

Lo pseudo-elemento ::first-letter

Lo pseudo-elemento ::first-letter permette di applicare stili solo al primo carattere della prima riga di un elemento block, come un <p> o un <div>.

<div>Lorem ipsum odor amet, consectetuer adipiscing elit...</div>

<style>
div::first-letter {
  color: darkred;
  font-family: serif;
  font-size: 40px;
  font-weight: bold;
}
</style>

Nell'esempio, abbiamo fatto diventare la prima lettera di colore rosso (il darkred, presente nella lista dei colori CSS), abbiamo cambiato il font del testo e modificato lo stile del testo, con il grassetto e la dimensione di 40px. 

Lo pseudo-elemento ::before

Lo pseudo-elemento ::before inserisce del contenuto prima del contenuto reale di un elemento. Ad esempio, possiamo aggiungere del testo prima di una nota:

<div>Fare sempre attenzione ad attraversare la strada.</div>

<style>
div::before {
  content: "Nota: ";
  font-weight: bold;
  color: red;
}
</style>

Possiamo anche usare ::before per aggiungere delle immagini:

<div>Fare sempre attenzione ad attraversare la strada.</div>

<style>
div::before {
  content: url('attenzione.png');
}
</style>

Lo pseudo-elemento ::after

Lo pseudo-elemento ::after inserisce contenuto dopo il contenuto reale di un elemento. Ad esempio, possiamo aggiungere un elemento di questo tipo per invogliare a scaricare un aggiornamento:

<div>È disponibile un aggiornamento di Android</div>

<style>
div::after {
  content: "Scarica ora!";
  padding: 1px 3px;
  background-color: yellow;
  margin-left: 5px;
  border-radius: 5px;
  font-weight: 400;
  border: 1px solid lightgrey;
}
</style>

Come con ::before, anche con ::after è possibile inserire delle immagini.

Lo pseudo-elemento ::selection

Lo pseudo-elemento ::selection aggiunge uno stile alla porzione di un elemento che viene selezionata dall'utente. Ad esempio, quando selezioni questo testo il colore sarà verde scuro:

<div>Evidenzia questo testo per vedere l'effetto.</div>

<style>
div::selection {
  background-color: darkgreen;
  color: black;
}
</style>

Lo pseudo-elemento ::marker

Lo pseudo-elemento ::marker consente di stilizzare il marcatore di un elenco, che di solito è un punto o un numero nelle liste puntate o numerate. Con ::marker, puoi cambiare il colore, la dimensione, il tipo di carattere e altri stili del marcatore. Ad esempio, possiamo far diventare i punti rossi:

<ul>
  <li>Elemento</li>
  <li>Elemento</li>
  <li>Elemento</li>
</ul>

<style>
li::marker {
  color: red;
}
</style>

È anche possibile cambiare completamente il marcatore con l'attributo content, che abbiamo visto con gli altri pseudo-elementi. Ad esempio, possiamo modificare il simbolo del marcatore:

<ul>
  <li>Elemento</li>
  <li>Elemento</li>
  <li>Elemento</li>
</ul>

<style>
li::marker {
  content: "✈ ";
}
</style>

<meta charset="utf-8">