Ho appena visto un codice CSS che includeva il tag ::before. Ho guardato MDN per vedere cosa è lo ::before ma non l'ho capito davvero. Qualcuno può spiegare come funziona? Fa un elemento DOM prima di ciò che selezioniamo per CSS?Qual è la differenza tra: before e :: before?
Questo distingue gli pseudo elementi dalle pseudo classi.
La differenza tra pseudo classi e pseudo-elementi è descritto nel http://www.d.umn.edu/~lcarlson/csswork/selectors/pseudo_dif.html
Il metodo :: before notation (con due punti) è stato introdotto nei CSS3 per stabilire una discriminazione tra pseudo-classi e pseudo-elementi. I browser accettano anche la notazione: prima introdotta in CSS 2. Fonte: https: //developer.mozilla.org/en-US/docs/Web/CSS/:: before Come prima c'è uno pseudo ELEMENT e non una pseudo CLASS (come: hover) due punti sono migliori (seguendo quindi lo standard CSS3). – JoostS
Secondo tali documenti, sono equivalenti:
element:before { style properties } /* CSS2 syntax */
element::before { style properties } /* CSS3 syntax */
L'unica differenza è che il doppio colon viene utilizzato in CSS3, mentre il singolo colon è la versione precedente.
Ragionamento:
L':: prima notazione è stato introdotto nel CSS 3, al fine di stabilire un discriminazione tra pseudo-classi e pseudo-elementi. I browser accettano anche la notazione: prima introdotta nel CSS 2.
Significano essenzialmente la stessa cosa. Il :: è stato introdotto in CSS3 per aiutare a discriminare tra pseudo elementi (come: before e: after) e pseudo classi (come: link e: hover).
Uno è il modo CSS2 (: prima) e l'altro è CSS3 (:: prima). Attualmente sono intercambiabili nei browser che supportano CSS2 & CSS3.
Ecco una buona spiegazione: http://www.impressivewebs.com/before-after-css3/
ho verificato MDN e w3.org, e il meglio che potevo venire in mente è che :: viene utilizzato per strutturali modifiche e : viene utilizzato per styling.
Attualmente sono intercambiabili per motivi di compatibilità.
Risulta separare :link (per esempio), che stili un <a>, da :before (che è un cambiamento strutturale ).
: è per lo stile, :: è per struttura.
AFAIK, il gruppo di lavoro CSS deciso di prefisso pseudo-elementi con un colon aggiuntivo per differenziarle dalle pseudo-classi che hanno un solo colon. –
... e poiché la notazione dei due punti non è implementata in IE8, dovremo aspettare fino a quando non verrà scaricata dal mercato (come nel 2016 o giù di lì), prima di poter iniziare a usare ':: before'. Ottimo lavoro, Microsoft '-.-' –
Gli pseudo-elementi sono in circolazione dai CSS1. I primi pseudo-elementi erano ': first-letter' e': first-line'. – BoltClock