Pseudo-elementi: ::before, ::after, ::placeholder, ::selection

Mentre le pseudo-classi selezionano uno stato o una posizione, gli pseudo-elementi creano o selezionano una parte specifica di un elemento, come se avessi inserito un nuovo tag HTML, ma facendolo unicamente tramite CSS.

Per convenzione e per distinguerli dalle pseudo-classi, gli pseudo-elementi si indicano con due punti doppi (::).

1. I costruttori: ::before e ::after

Questi due pseudo-elementi permettono di inserire contenuti grafici prima o dopo il contenuto reale di un tag HTML, senza modificare il markup.

Perché funzionino, serve la proprietà content nel CSS. Anche se la lasci vuota, se non c’è content, l’elemento non viene generato.

/* Aggiunge un'icona testuale prima di tutti i link esterni */
a[href^="http"]::before {
  content: "[esterno] ";
}

/* Crea un badge "Nuovo" visivo attaccato al titolo */
.titolo-novita::after {
  content: "NUOVO";
  background-color: red;
  color: white;
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 3px;
  margin-left: 10px;
}

Cosa creano davvero? Dietro le quinte, il browser crea un finto tag <span> come primo figlio (::before) o ultimo figlio (::after) dell’elemento selezionato. Sono ampiamente usati per inserire icone decorative, virgolette per i blocchi di citazione, decorazioni di sfondo personalizzate, o pallini colorati nelle liste senza appesantire l’HTML.

2. Lo stile dei campi di testo: ::placeholder

I campi di input testuali HTML hanno un attributo placeholder (il testo grigio sbiadito che suggerisce cosa scrivere). Questo testo interno non è un elemento reale, ma lo pseudo-elemento ::placeholder ci permette di colorarlo e formattarlo.

input::placeholder {
  color: #aab7c4;
  font-style: italic;
  font-size: 14px;
}

/* Quando l'input è a fuoco (pseudo-classe + pseudo-elemento) */
input:focus::placeholder {
  color: transparent; /* Fa sparire il suggerimento appena l'utente inizia a scrivere */
}

3. Selezione testo: ::selection

Hai presente quando evidenzi il testo di una pagina con il cursore e lo sfondo diventa blu? Quel comportamento di default può essere personalizzato per adattarsi ai colori del tuo brand grazie allo pseudo-elemento ::selection.

/* Cambia il colore di evidenziazione in tutto il sito */
::selection {
  background-color: #ff9800; /* Arancione brand */
  color: white; /* Testo bianco */
}

/* Solo per il testo dentro paragrafi speciali */
.highlight-text::selection {
  background-color: yellow;
  color: black;
}

Grazie agli pseudo-elementi possiamo curare dettagli dell’esperienza utente mantenendo pulita la semantica del nostro HTML.