Corso di CSS / Pseudo-elementi CSS: decorazioni con ::before e ::after

Gli pseudo-elementi CSS stilizzano una parte particolare di un elemento o creano una casella solo di presentazione. ::before e ::after possono aggiungere contenuto decorativo, ma le informazioni essenziali dovrebbero restare nell'HTML invece di dipendere dal contenuto generato.

Distinguere pseudo-classi e pseudo-elementi

La lezione sui combinatori e le pseudo-classi CSS mostra come selezionare elementi per relazione o condizione. Una pseudo-classe seleziona uno stato o una condizione di un elemento esistente. a:hover prende di mira il collegamento stesso su cui il mouse è posizionato. Uno pseudo-elemento prende di mira una parte specifica dell'elemento o della sua rappresentazione creata. a::after decora uno pseudo-elemento generato dopo il contenuto del collegamento. Nel nuovo codice, usa un carattere di due punti per le pseudo-classi e due caratteri di due punti per gli pseudo-elementi per rendere più facile distinguere tra i due.

a:hover { color: #1d4ed8; }
a::after { content: ""; }

before e after non aggiungono tag fratelli HTML reali al di fuori dell'elemento selezionato. Creano espressioni prima e dopo il contenuto dell'elemento. Gli strumenti per sviluppatori possono mostrare gli pseudo-elementi come linee separate, ma questo non è lo stesso che avere span scritti nell'HTML originale. Non puoi semplicemente recuperare pseudo-elementi creati da codice che cerca elementi figli comuni.

Comprendere contenuto e visualizzazione

h1::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: currentColor;
}

content: "" crea uno pseudo-elemento senza testo. Anche se il contenuto è vuoto, può apparire come una casella decorativa se gli dai uno sfondo e una dimensione. D'altra parte, se la proprietà content è omessa oppure impostata a none, questo pseudo-elemento non viene creato e il punto non appare nemmeno se vengono aggiunti dimensioni e sfondo.

La visualizzazione predefinita di ::before e ::after è inline. Usa inline-block per un punto decorativo che necessita di larghezza e altezza esplicite, e block per una linea sotto il contenuto. Per questgli pseudo-elementi, omettere content o impostarlo su none impedisce la generazione del box. Per ulteriori dettagli, vedi Proprietà display: block, inline, inline-block ed elementi nascosti. Vedi MDN: ::before.

currentColor è una parola chiave che si riferisce al valore del colore dell'elemento, cioè il colore corrente del testo. Se cambi il titolo da verde a blu, anche lo sfondo dello pseudo-elemento utilizzerà lo stesso colore. border-radius: 50% arrotonda gli angoli delle scatole con la stessa larghezza e altezza per farle apparire come cerchi. margin-right è lo spazio esterno tra punti e lettere.

Aggiungi un punto prima di un titolo e una linea dopo un link

Il seguente esempio completo crea un punto di 12px prima del titolo e una linea di 2px sotto il link. Mantiene anche la sottolineatura predefinita sul link stesso, quindi la separazione del link viene mantenuta anche se la linea aggiuntiva scompare. Al passaggio del mouse o al focus tramite tastiera, le linee decorative diventano più spesse fino a 4px.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Small Garden</title>
  <style>
body { margin: 24px; font-family: sans-serif; line-height: 1.7; color: #333; }
    h1 { color: #087f5b; font-size: 30px; }
    h1::before {
      content: "";
      display: inline-block;
      width: 12px;
      height: 12px;
      margin-right: 10px;
      border-radius: 50%;
      background-color: currentColor;
    }
    a { display: inline-block; color: #087f5b; text-decoration: underline; }
    a::after {
      content: "";
      display: block;
      height: 2px;
      margin-top: 4px;
      background-color: currentColor;
    }
    a:hover::after, a:focus-visible::after { height: 4px; }
    a:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 4px; }
  </style>
</head>
<body>
<h1>Small Garden</h1>
  <p>We open at 9 a.m. every day.</p>
  <a href="#visit">Visitor Information</a>
  <h2 id="visit">What to bring</h2>
  <p>Bring a water bottle and comfortable shoes.</p>
</body>
</html>

Salvalo come index.html ed eseguilo. Il titolo mantiene il testo effettivo “Small Garden” e il cerchio davanti è una decorazione CSS. Anche il link ha il nome “Visitor Information” e una destinazione di navigazione nell’HTML. a:hover::after seleziona lo pseudo-elemento ::after del link a quando il link è nello stato hover. Le notazioni lunghe sembrano meno complicate se le leggi separatamente in base al numero di due punti e all’ordine di selezione.

Il diagramma illustra lo stesso HTML con e senza gli pseudo-elementi decorativi. Il testo e la destinazione del link rimangono invariati. Nell'esempio completo, la linea decorativa del link è alta 2px di default e diventa 4px al passaggio del mouse o al focus visibile tramite tastiera.

Mantenere le informazioni essenziali in HTML

Diversi lettori di schermo e browser possono fornire contenuti generati in modi diversi, quindi non fare affidamento solo sugli pseudo-elementi per includere informazioni essenziali. È più chiaro scrivere le condizioni nell'effettiva etichetta o nella frase guida piuttosto che informare le condizioni di input con content: "Required". Il solo fatto che uno pseudo-elemento sia visibile non conferma la sua accessibilità.

È meglio non fare affidamento sull'implementazione generale della decorazione aggiungendo before e after agli elementi che mostrano contenuti esterni, come img. Applicalo agli elementi che contengono contenuti, come h1 o a, come in questo esempio. Se hai bisogno di decorazioni intorno all'immagine, potresti considerare di avere un elemento HTML separato che circonda l'immagine e decorare gli pseudo-elementi di quell'elemento.

Diagnostica gli pseudo-elementi mancanti

1. Sostituisci content: ""; in h1::before con content: none;. Il testo del titolo dovrebbe rimanere lo stesso, ma solo il punto dovrebbe scomparire. Dopo la conferma, ripristinalo come stringa vuota.
2. Sostituisci display: inline-block; nel punto con display: inline;. Nota che le decorazioni in linea senza testo non possono mantenere il punto originale da 12px usando solo larghezza·altezza. Torna a inline-block.
3. Cambia il colore di h1 in #1d4ed8. Assicurati che anche i punti siano colorati di blu e che i link rimangano verdi. currentColor non si riferisce a un solo colore sull'intera pagina.
4. Passa il mouse sul link e verifica se la linea diventa più spessa. Allontana il mouse e usa Tab per spostare il focus sul link e verifica se linea e contorno sono visibili insieme.

Quando si effettua il controllo, prima verifica se il selettore corrisponde all'elemento effettivo e se il contenuto è valido, quindi guarda la visualizzazione, la dimensione e lo sfondo. Se modifichi l'altezza della linea del collegamento a 0, la linea non sarà visibile, ma lo pseudo-elemento stesso creato come contenuto non scomparirà necessariamente. Distinguere tra “l'elemento non è stato creato” e “è stato creato ma non ha area di disegno” può aiutarti a restringere la causa del malfunzionamento.

Dopo l'esercizio, ripristina i valori originali e salva. Gli pseudo-elementi possono fornire decorazioni senza elementi HTML aggiuntivi, ma il contenuto essenziale deve rimanere disponibile indipendentemente da quella decorazione. Inizia con un punto o una linea e verifica che il testo effettivo, la destinazione del collegamento e il comportamento da tastiera rimangano intatti.