Cos'è un pseudo-elemento?

L'elemento pseudo in CSS è una parola chiave aggiunta a un selettore, che consente di stilizzare una parte specifica dell'elemento senza creare esplicitamente elementi DOM aggiuntivi.

Gli pseudo-elementi più comunemente usati sono:

• ::before: Inserisce contenuto generato prima del contenuto dell'elemento selezionato.
• ::after: Inserisce contenuto generato dopo il contenuto dell'elemento selezionato.
• ::first-line: Applica stili alla prima riga di un elemento di blocco.
• ::first-letter: Applica stili alla prima lettera di un elemento di blocco.
• ::selection: Applica stili alla parte dell'elemento selezionata dall'utente (ad esempio, durante la selezione del testo con il mouse).
• ::placeholder: Applica stili al testo segnaposto nei campi <input> o <textarea>.

Esempio di utilizzo di ::before e ::after:

div::before {
  content: "Prefisso: "; // Proprietà content obbligatoria
  color: blue;
}

div::after {
  content: " Suffisso"; // Proprietà content obbligatoria
  color: red;
}

Esempio di utilizzo di ::first-line e ::first-letter:

p::first-line {
  font-weight: bold;
}

p::first-letter {
  font-size: 2em;
  float: left;
  margin-right: 0.1em;
}

Gli pseudo-elementi sono utili per aggiungere elementi decorativi, generare contenuto, stilizzare parti del testo e altre attività, semplificando la struttura HTML. Storicamente iniziavano con un singolo due punti (:), ma la specifica CSS3 ha introdotto due punti (::) per distinguere tra pseudo-classi (:hover, :focus) e pseudo-elementi, anche se un singolo due punti è ancora supportato dalla maggior parte dei browser per gli pseudo-elementi più vecchi. Si consiglia di usare ::.