Con il termine Pseudo-element ci riferiamo a delle aree all'interno di ogni elemento HTML accessibili solo attraverso CSS. Grazie a queste zone possiamo applicare effetti grafici, inserire o modificare lo stile di un testo senza dover intervenire sul codice HTML. Il risultato sarà quindi visibile solo una volta che la pagina verrà caricata all'interno del browser.

Per accedere a queste aree, la sintassi richiesta è la seguente

selettore::pseudo-element {
  proprietà: valore;
}

La versione canonica prevede l'utilizzo di ::, ma dato che alla nascita di questi selettori veniva utilizzato un singolo :, tutti i browser supportano entrambe le sintassi.

I più famosi pseudo-element sono ::before e ::after. Come si può intendere dal nome sono due aree che si trovano prima e dopo il contenuto HTML dell'elemento. Sono spesso utilizzati per creare forme che vanno ad arricchire esteticamente il layout, o in alcuni casi usati come labels, consentendoci di non appesantire il codice HTML e presentare lo stesso contenuto, con lo stesso stile, all'interno di tutta la nostra applicazione, come nel caso seguente

<style>
p.memo::before {
  content: "Memo";
  display: block;
  font-size: 0.8rem;
  font-style: italic;
}
</style>

<p class="memo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque iaculis gravida. 
Nullam ligula lectus, ultricies vitae lectus a, aliquam luctus nisi.</p>

Se caricato all'interno di un browser il codice mostrerà un paragrafo nella cui parte superiore verrà inserita la parola "Memo" con un font ridotto e uno stile corsivo.

A volte capita di imbattersi anche in ::first-letter e ::first-line, questi consentono di modificare lo stile per la prima lettera, o la prima linea presente in un elemento, utili per creare particolari effetti stilistici. Lo snippet seguente ingrandirà la prima lettera del paragrafo, ottenendo un effetto "manoscritto"

<style>
p{
  line-height: 2rem;
}

p::first-letter {
  float: left;
  font-size: 3rem;
}
</style>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque iaculis gravida. 
Nullam ligula lectus, ultricies vitae lectus a, aliquam luctus nisi.</p>