:: prima / :: dopo - Trucchi CSS

L' ::beforee ::afterpseudo-elementi in CSS permette di inserire contenuti su una pagina senza attendere di essere in HTML. Anche se il risultato finale non è effettivamente nel DOM, appare sulla pagina come se lo fosse e sarebbe essenzialmente così:

div::before ( content: "before"; ) div::after ( content: "after"; )

 before after

Gli unici motivi per usarne uno sull'altro sono:

Si desidera che il contenuto generato venga prima del contenuto dell'elemento, in posizione.
Il ::aftercontenuto è anche "dopo" nell'ordine di origine, quindi si posizionerà sopra :: prima se impilato uno sopra l'altro naturalmente.

Nota che il contenuto è ancora all'interno dell'elemento a cui è applicato. Il tipo di denominazione sembra che potrebbero venire, sai, prima o dopo l'elemento, ma in realtà è prima o dopo l'altro contenuto all'interno.

Il valore per il contenuto può essere:

Una stringa: content: "a string"; - i caratteri speciali devono essere codificati in modo speciale come entità Unicode. Vedi la pagina dei glifi.
Un'immagine: contenuto: url (/path/to/image.jpg.webp); - L'immagine viene inserita nelle sue esatte dimensioni e non può essere ridimensionata. Poiché cose come i gradienti sono in realtà immagini, uno pseudo elemento può essere un gradiente.
Niente: contenuto: “”; - Utile per clearfix e inserire immagini come immagini di sfondo (imposta larghezza e altezza e può anche ridimensionare con la dimensione dello sfondo).
Un contatore: content: counter(li); - Davvero utile per gli elenchi di stili fino a quando: arriva il pennarello.

Nota che non puoi inserire HTML (almeno, verrà visualizzato come HTML). content: "";

: vs ::

Ogni browser che supporta i due punti doppi (: :) La sintassi CSS3 supporta anche solo la sintassi (:), ma IE 8 supporta solo i due punti singoli, quindi per ora si consiglia di utilizzare solo i due punti singoli per il miglior supporto del browser.

:: è il formato più recente inteso a distinguere lo pseudo contenuto dagli pseudo-selettori. Se non hai bisogno del supporto di IE 8, sentiti libero di usare i due punti doppi.

Relazionato

::prima linea
::prima lettera
Selettori di pseudo classi

Supporto browser

Piccoli problemi:

Firefox 3.5- non consentirebbe il posizionamento assoluto di pseudo elementi.
In Opera 9.2, gli spazi bianchi sono sempre visualizzati all'interno di questo pseudo-elemento come se fosse pretesto.
IE 8 non supporta z-index su di essi