::before & ::after

I selettori::before e ::after, consentono in CSS di creare degli pseudo-elementi per aggiungere del contenuto in una pagina senza che sia scritto nel documento HTML attraverso la proprietà content.

Ecco un esempio di come il seguente codice CSS possa influire sul documento:

div::before {
  content: "♥";
}

div::after {
  content: "★";
}
<div>
  ♥
  <!-- Il resto del contenuto... -->
  ★
</div>

Come avrete potuto osservare, il contenuto è comunque all’interno dell’elemento. Quindi non viene aggiunto prima o dopo l’elemento ma prima o dopo il contenuto dell’elemento.

L’unico motivo per utilizzare uno o l’altro è che il contenuto aggiunto con ::after sarà posizionato al di sopra del contenuto aggiunto con ::before.

#Possibili Utilizzi

Il valore per content può essere vario:

Una stringa può contenere qualsiasi carattere, anche Unicode. Il contenuto va racchiuso tra due virgolette: content: "stringa";

Un’immagine può essere aggiunta specificandone il percorso: content: url(percorso/immagine.png). L’immagine sarà aggiunta con le sue esatte dimensioni ma può essere ridimensionata utilizzando transform: scale(0.5). Si possono anche specificare dei gradienti.

Un contatore può essere inserito per personalizzare le liste – content: counter(contatore);

Un attributo di un elemento può essere visualizzato utilizzando la funzione attr()content: attr(nome-attributo);

Nulla con content: "". Questo torna utile quando per i clearifix e per inserire immagini di sfondo aggiungendo la proprietà background-image.

Non può essere inserito del codice HTML, o meglio, anche se inserito non verrà renderizzato come tale.

#Esempio

#: oppure ::

Ogni browser che supporta i doppi due punti (::) introdotti con CSS3 supporta anche un solo doppio punto (:), ma IE 8 supporta solo il singolo doppio punto. Se si vuole ottenere il miglior supporto da parte dei browser è quindi consigliato usare un singolo doppio punto (:).

I doppi due punti sono il nuovo formato per distinguere le pseudo-classi (::) dalle pseudo-classi (:). Se non ti interessa il supporto per Internet Explorer 8, puoi usare i doppi due punti.

#Supporto dei Browser

Il numero indica la versione minima del browser in cui la feature sia supportata. Per ottenere maggiori informazioni, passare con il mouse sopra la versione.

Desktop

chrome
Google Chrome
4
firefox
Mozilla Firefox
2
ie
Internet Explorer
9
edge
Microsoft Edge
12
opera
Opera
9
safari
Apple Safari
3.1

Mobile / Tablet

and_chr
Android Chrome
85
and_ff
Android Firefox
79
android
Android
2.1
samsung
Samsung Internet
4
op_mob
Opera Mobile
10
ios_saf
iOS Safari
3.2

Queste statistiche sul supporto da parte dei browser provengono da Caniuse, che potete visitare per informazioni più dettagliate.