Guida CSS interattiva: ::before e ::after

Q: Perché il mio ::before o ::after non si vede?

Il motivo più comune è la mancanza della proprietà content: senza, lo pseudo-elemento non viene generato. Usa content: "" per un box decorativo vuoto. Altre cause: uno pseudo-elemento inline con larghezza e altezza (dagli display: block o inline-block), oppure un elemento come o che non può contenerli.

Q: Che differenza c'è tra :before e ::before?

Nessuna nel comportamento. ::before con due due punti è la sintassi attuale che distingue gli pseudo-elementi; :before con un solo due punti è la vecchia grafia CSS2 che i browser accettano ancora per before, after, first-line e first-letter.

Q: Gli screen reader leggono il contenuto di ::before in CSS?

In genere sì: il testo in content di solito entra nel nome accessibile, ma non si può selezionare né copiare. Tieni le informazioni vere nell'HTML e usa gli pseudo-elementi per decorazioni e piccoli indizi visivi.

Cosa fanno ::before e ::after

::before inserisce un box come primo figlio di un elemento e ::after come ultimo figlio. Cosa contiene il box lo decide la proprietà content. Nell'HTML non viene aggiunto nulla: il browser lo genera dal CSS.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>before and after</title>
  <style>
    .price::before { content: "$"; color: #16a34a; }
    .price::after { content: " / month"; color: #6b7280; font-size: 14px; }
    .done::before { content: "✓ "; color: #16a34a; font-weight: bold; }
  </style>
</head>
<body>
  <p class="price">9</p>
  <p class="done">Tests pass</p>
</body>
</html>

L'HTML contiene solo 9 e Tests pass. Il simbolo del dollaro, l'etichetta "/ month" e il segno di spunta vengono tutti dal CSS. Ereditano gli stili dell'elemento (font, colore) a meno che tu non li sovrascriva, come fanno gli esempi qui sopra.

Sintassi

selector::before {
  content: "text";   /* required */
  /* any other styles */
}

selector::after {
  content: "";       /* empty string: a box with no text */
}

Valore di `content`	Risultato
`"text"`	Una stringa. Usa `"\A"` per andare a capo (con `white-space: pre`), `"\2192"` per un carattere Unicode (→)
`""`	Un box vuoto, per forme e decorazioni
`attr(data-label)`	Il valore di un attributo dell'elemento
`counter(step)`	Il valore di un contatore CSS
`open-quote` / `close-quote`	Le virgolette della lingua dell'elemento
`none` o `normal`	Nessuno pseudo-elemento (`normal` è il valore predefinito)

content è obbligatorio. Senza, ::before e ::after non vengono mai creati, per quante altre proprietà tu gli dia.

Forme decorative con content: ""

Con content: "", lo pseudo-elemento è un box vuoto a cui puoi dare dimensioni e colore. Per impostazione predefinita è inline, e un box inline ignora width e height, quindi dagli display: block, inline-block o position: absolute:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Shapes</title>
  <style>
    .status::before {
      content: "";
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #16a34a;
      margin-inline-end: 8px;
    }
    .status.offline::before { background: #e5e7eb; }

    .heading::after {
      content: "";
      display: block;
      width: 48px;
      height: 4px;
      background: #2563eb;
      margin-top: 6px;
      border-radius: 2px;
    }
  </style>
</head>
<body>
  <h2 class="heading">Section title</h2>
  <p class="status">Online</p>
  <p class="status offline">Offline</p>
</body>
</html>

Posizionare uno pseudo-elemento

Per una decorazione che sta sopra o attorno all'elemento, usa position: absolute sullo pseudo-elemento e position: relative sull'elemento stesso, così gli spostamenti si misurano a partire dall'elemento:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline on hover</title>
  <style>
    .link {
      position: relative;
      color: #2563eb;
      text-decoration: none;
      font-size: 20px;
    }
    .link::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -4px;
      width: 100%;
      height: 2px;
      background: currentColor;
      transform: scaleX(0);
      transition: transform 0.25s;
    }
    .link:hover::after { transform: scaleX(1); }

    .card { position: relative; border: 2px solid #e5e7eb; padding: 16px; margin-top: 24px; }
    .card::before {
      content: "NEW";
      position: absolute;
      top: -12px;
      right: 12px;
      background: #f59e0b;
      padding: 2px 8px;
      font-size: 12px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <a class="link" href="#">Hover this link</a>
  <div class="card">A card with a badge from ::before</div>
</body>
</html>

Fai attenzione all'ordine quando lo combini con una pseudo-classe: prima viene lo stato, poi lo pseudo-elemento, .link:hover::after, mai .link::after:hover.

attr() porta il valore di un attributo dentro content, così una sola regola può mostrare un testo diverso su ogni elemento:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Tooltip</title>
  <style>
    [data-tip] { position: relative; border-bottom: 1px dotted #2563eb; cursor: help; }
    [data-tip]::after {
      content: attr(data-tip);
      position: absolute;
      bottom: 125%;
      left: 0;
      background: #111827;
      color: white;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 13px;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s;
    }
    [data-tip]:hover::after { opacity: 1; }
    p { margin-top: 48px; }
  </style>
</head>
<body>
  <p>Hover <span data-tip="HyperText Markup Language">HTML</span> or
     <span data-tip="Cascading Style Sheets">CSS</span>.</p>
</body>
</html>

Un tooltip che compare solo all'hover è invisibile per chi usa la tastiera o il touch. Per qualsiasi cosa importante, metti il testo nella pagina, oppure mostralo anche in :focus con tabindex="0" sull'elemento.

Numerare con i contatori

I contatori CSS e ::before numerano gli elementi senza scrivere i numeri a mano:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Counters</title>
  <style>
    .steps { counter-reset: step; padding: 0; }
    .steps li { list-style: none; counter-increment: step; margin: 8px 0; }
    .steps li::before {
      content: counter(step);
      display: inline-block;
      width: 24px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      border-radius: 50%;
      background: #2563eb;
      color: white;
      margin-inline-end: 8px;
    }
  </style>
</head>
<body>
  <ol class="steps">
    <li>Write the HTML</li>
    <li>Add the CSS</li>
    <li>Open it in a browser</li>
  </ol>
</body>
</html>

Aggiungi o togli un passaggio e i numeri si aggiornano da soli.

Dove ::before e ::after non funzionano

Gli pseudo-elementi vengono inseriti dentro l'elemento, tra i suoi tag. Gli elementi che non hanno un interno per ospitarli non possono mostrarli:

<img>, <video>, <iframe> (elementi sostituiti)
<input>, <select>, <textarea> (controlli dei moduli), e <br>

Alcuni browser li disegnano su una checkbox o su un'immagine non caricata, ma non in modo coerente. Metti invece lo pseudo-elemento su un contenitore: <span class="field"><input></span> e dai stile a .field::after.

Errori comuni

Niente content. È il motivo più frequente per cui non si vede nulla. Aggiungi content: "".
Dare dimensioni a uno pseudo-elemento inline. width e height non fanno nulla finché non imposti display: block, inline-block o position: absolute.
Ordine sbagliato con uno stato. a:hover::after funziona; a::after:hover no.
Posizione assoluta senza un genitore posizionato. Lo pseudo-elemento si allinea allora a qualche antenato lontano. Aggiungi position: relative all'elemento.
Mettere contenuti veri nel CSS. Il testo in content non si può selezionare né copiare. Tieni le informazioni nell'HTML.

Domande frequenti

Cosa fa ::before in CSS?

Crea uno pseudo-elemento che è il primo figlio dell'elemento selezionato, riempito con ciò che indica la proprietà content. ::after fa lo stesso come ultimo figlio. Nessuno dei due esiste nell'HTML, quindi sono comodi per icone, etichette e decorazioni.

Perché il mio ::before o ::after non si vede?

Il motivo più comune è la mancanza della proprietà content: senza, lo pseudo-elemento non viene generato. Usa content: "" per un box decorativo vuoto. Altre cause: uno pseudo-elemento inline con larghezza e altezza (dagli display: block o inline-block), oppure un elemento come <img> o <input> che non può contenerli.

Che differenza c'è tra :before e ::before?

Nessuna nel comportamento. ::before con due due punti è la sintassi attuale che distingue gli pseudo-elementi; :before con un solo due punti è la vecchia grafia CSS2 che i browser accettano ancora per before, after, first-line e first-letter.

Posso usare ::before su un img o un input?

Non in modo affidabile. Gli pseudo-elementi vengono inseriti dentro il contenuto dell'elemento, e gli elementi sostituiti come <img> e i controlli dei moduli come <input> non hanno un box di contenuto per ospitarli. Racchiudi l'elemento in uno <span> o in un <div> e metti lo pseudo-elemento sul contenitore.

Gli screen reader leggono il contenuto di ::before in CSS?

In genere sì: il testo in content di solito entra nel nome accessibile, ma non si può selezionare né copiare. Tieni le informazioni vere nell'HTML e usa gli pseudo-elementi per decorazioni e piccoli indizi visivi.

Concetti correlati