::before
(dos veces los dos puntos) es la "versión" CSS3 del pseudoelemento.
:before
(una vez los dos puntos) es la "versión" CSS2.1 del pseudoelemento.
La diferencia en términos de código:
/* CSS3 */
div::before {
content: 'bla ';
}
/* CSS2.1 */
div:before {
content: 'bla ';
}
Las dos sintaxis se pueden usar en todos los navegadores modernos y en IE a partir de la versión 9. IE8 solo acepta :before
, y versiones anteriores (IE7, IE6) que en teoría ya no deberían existir (o utilizarse), no lo soportan.
La versión de CSS3 fue creada para diferenciar los pseudoelementos de las pseudoclases, manteniendo estas últimas la sintaxis de CSS2.1 (una vez los dos puntos).
A continuación la definición de la sintaxis de :before
en CSS2.1: https://www.w3.org/TR/2011/REC-CSS2-20110607/generate.html#before-after-content
En la especificación de CSS3, en la sección de cambios con respecto a CSS2 se ve reflejado: https://drafts.csswg.org/selectors-3/#changesFromCSS2
Y por último la especificación de ::before
en CSS3: https://drafts.csswg.org/selectors-3/#gen-content