::before e :: after sono pseudo elementi che permettono di inserire contenuti in una pagina web senza l’utilizzo dell’HTML ma solo con il CSS. Il risultato finale del pseudo elemento non è in realtà nel DOM* come un <div> un <p> o un qualsiasi altro elemento standard HTML, ma appare all’interno del div in cui viene utilizzato.

Esempio completo:

See the Pen Come utilizzare ::before e ::after by Alberto Firenzuola (@AlbertoFirenzuola) on CodePen.0

Come si può notare dall’esempio riportato sopra ::before and ::after sono esattamente la stessa cosa. L’unica differenza principale è che ::before inserisce il contenuto prima di qualsiasi altro contenuto nell’HTML mentre ::after dopo.

Le uniche ragioni per usare ::before invece di ::after sono le seguenti:

• Vuoi che il contenuto generato venga prima del contenuto dell’elemento (::before)
• Il contenuto di :: after si posiziona dopo il contenuto dell’elemento e quindi si posizionerà sopra l’elemento generato anche dal ::before (::after)

Per utilizzare ::before e ::after è indispensabile l’utilizzo della proprietà content nel css.
Content può contenere a suo interno vari valori:

• Niente: (content: ” “) – Il content senza nessun contenuto viene spesso utilizzato per la creazione di un div con una larghezza e altezza e un immagine di sfondo.
• Una stringa: (content: “\f0c9”) – Possono essere inserite stringhe come parole della nostra lingua ma anche caratteri speciali o codici speciali, spesso utilizzati per inserire icone da FontAwesome.
• Un immagine: (content: url(/path/to/image.png) ) – L’immagine è inserita nelle sue esatte dimensioni e non può essere ridimensionata.
• Un contatore:  (content: counter(li) ) – Davvero utile per stilare una lista di elementi

Se nella propietà content viene inserito dell’html insieme ad altro testo come ad esempio: <h1>Ciao mondo!</h1>, l’html non verrà interpretato ma mostrato a video come una stringa di testo.

::before e ::after o :before e :after ?
Spesso vi capiterà di vedere entrambe le scritture. Tutti i browser supportano i doppi due punti “::” tranne Internet Explorer 8 che supporta solamente il singolo due punti “:”. Quindi è fortemente utilizzato il “:” per una maggior compatibilità tra i browser.

* Con DOM (Document Object Model) si intende un modello, ovvero un modo per rappresentare un documento. Il DOM è solamente uno degli indici possibili, cioè uno dei tanti modi di accedere ai contenuti della pagina.