CSS ::before Pseudo Elemento

Lo pseudo-elemento CSS ::before crea un elemento generato che viene inserito come primo figlio dell'elemento di destinazione, prima del suo contenuto reale. È uno dei due pseudo-elementi per i "contenuti generati" (il suo corrispettivo è ::after) ed è utilizzato più spesso per aggiungere icone decorative, etichette, contatori, virgolette o abbellimenti visivi senza modificare l'HTML.

Questa pagina illustra cosa fa ::before, la proprietà senza cui non può esistere, esempi eseguibili, i casi d'uso reali più comuni e le problematiche di accessibilità da conoscere.

Come funziona `::before`

Lo pseudo-elemento ::before viene visualizzato solo se si dichiara anche la proprietà content — quel valore è ciò che viene inserito. Senza content, non appare nulla (nemmeno un box vuoto).

Comportamenti principali:

Inline per impostazione predefinita. Come uno <span>, si posiziona in linea con il testo circostante finché non si cambia il suo display (ad esempio in inline-block o block).
È un box reale. Puoi stilizzarlo, animarlo, posizionarlo o fargli fare il float come qualsiasi altro elemento, ed eredita gli stili dall'elemento a cui appartiene.
Viene prima. ::before viene inserito prima del contenuto dell'elemento; ::after viene inserito dopo. Entrambi vivono all'interno dell'elemento, tra i suoi tag.
La sintassi con un solo due punti funziona ancora. La sintassi legacy :before (un solo due punti) è equivalente ed era quella compresa dai browser molto vecchi. Il doppio due punti ::before è lo standard moderno che distingue gli pseudo-elementi dalle pseudo-classi — è da preferire.

Informazione

::before e ::after non funzionano sugli elementi sostituiti come <br>, <img>, <input> o <video>, perché tali elementi non hanno contenuto del documento attorno a cui inserire contenuto generato.

Sintassi

selector::before {
  content: "value"; /* required */
  /* other declarations */
}

Il valore di content può essere una stringa letterale, un'immagine (url(...)), il valore di un attributo (attr(...)), o un contatore (usato insieme a counter-increment). Per un box puramente decorativo senza testo, usa una stringa vuota: content: "".

Esempi

Inserire un'etichetta di testo prima del contenuto

Qui ::before aggiunge una stringa fissa a ogni paragrafo:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::before { 
        content: "  William Shakespeare -";
      }
    </style>
  </head>
  <body>
    <h2>::before selector example</h2>
    <p>"Be or not to be".</p>
  </body>
</html>

Provalo tu stesso »

Il testo inserito "William Shakespeare -" appare direttamente prima della citazione, anche se non esiste da nessuna parte nell'HTML.

Stilizzare il box generato

Poiché lo pseudo-elemento è un box, puoi assegnargli uno sfondo, un bordo e un valore display come a qualsiasi elemento normale:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::before { 
        content: "William Shakespeare-";
        display: inline-block;
        background-color: #ccc;
        color: #666;
        border: 2px dotted #000;
      }
    </style>
  </head>
  <body>
    <h2>::before selector example</h2>
    <p>"Be or not to be".</p>
  </body>
</html>

Provalo tu stesso »

Casi d'uso comuni

::before eccelle ogni volta che hai bisogno di decorazione che non appartiene al markup:

Icone e punti elenco — antepone un simbolo (content: "★") o un'immagine url() a link, elementi di lista o pulsanti.
Marcatori di campo obbligatorio — aggiunge un asterisco rosso alle etichette: label.required::before { content: "*"; color: red; }.
Virgolette di apertura — avvolge i blockquote con virgolette tipografiche.
Contatori — combinato con counter-increment per numerare le sezioni automaticamente.
Estrarre valori dagli attributi — visualizza l'attributo di un elemento con attr():

abbr[title]::before {
  content: attr(title) ": ";
  font-weight: bold;
}

Accessibilità e problematiche

content è obbligatorio. Se lo dimentichi, lo pseudo-elemento non viene generato affatto.
I box decorativi richiedono content: "". Per un elemento puramente visivo (un divisore, uno sfondo per icona) imposta una stringa vuota in modo che il box venga comunque renderizzato.
Il testo generato non è selezionabile e la maggior parte degli screen reader lo ignora o lo legge in modo incoerente. Non inserire mai informazioni che l'utente deve avere (come istruzioni critiche) solo in ::before.
Non si applica agli elementi sostituiti (<img>, <input>, <br>, ecc.).
Il punto di inserimento è importante. ::before è il primo figlio all'interno dell'elemento — non prima del tag di apertura dell'elemento.

Nota

Per gli pseudo-elementi puramente decorativi, imposta sempre content: '' per assicurarti che vengano renderizzati correttamente in tutti i browser.

Supporto dei browser

::before è supportato in tutti i browser moderni. La forma con un solo due punti (:before) è anch'essa ampiamente supportata ed era la sintassi usata prima di CSS3, quindi usala solo se devi supportare browser molto vecchi.

Riferimenti correlati

::after — inserisce contenuto dopo un elemento.
content — la proprietà che definisce cosa inserisce ::before.
counter-increment — crea una numerazione automatica con il contenuto generato.
position — posiziona con precisione un elemento generato.

Esercitazione

Pratica

Cosa fa lo pseudo-elemento '::before' in CSS?

Inserisce contenuto prima del contenuto dell'elemento selezionato.Nasconde il contenuto prima dell'elemento selezionato.Cambia il colore dell'elemento selezionato.Viene usato per applicare stili all'elemento selezionato prima di qualsiasi altro stile.

Come funziona ::before