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.
Link utili
Supporto dei Browser
[caniuse feature=”css-gencontent”]