Acabo de ver un código CSS que incluía la etiqueta ::before. Miré MDN para ver qué es ::before pero realmente no lo entendí. ¿Alguien puede explicar cómo funciona? ¿Hace un elemento DOM antes de lo que seleccionamos por CSS?¿Cuál es la diferencia entre: antes y :: antes?
Esto distingue los pseudo-elementos de las pseudo-clases.
La diferencia entre clases seudo y pseudo elementos se describe en http://www.d.umn.edu/~lcarlson/csswork/selectors/pseudo_dif.html
La notación :: before (con dos dos puntos) se introdujo en CSS3 para establecer una discriminación entre pseudo-clases y pseudo-elementos. Los navegadores también aceptan la notación: antes introducida en CSS 2. Fuente: https: //developer.mozilla.org/es-US/docs/Web/CSS/:: before Como antes es un pseudo ELEMENT y no una pseudo CLASS (como: hover) dos dos puntos es mejor (siguiendo así el estándar CSS3). – JoostS
Según estos documentos, que son equivalentes:
element:before { style properties } /* CSS2 syntax */
element::before { style properties } /* CSS3 syntax */
La única diferencia es que el doble de colon se utiliza en CSS3, mientras que el único de colon es la versión legado.
Razonamiento:
La notación :: antes se introdujo en CSS 3 con el fin de establecer una discriminación entre pseudo-clases y pseudo-elementos. Navegadores también aceptan la notación: antes introducidas en CSS 2.
Ellos significan esencialmente lo mismo. El :: se introdujo en CSS3 para ayudar a descriminar entre pseudo elementos (como: before y: after) y pseudo clases (como: link y: hover).
Uno es el modo CSS2 (: antes) y el otro es CSS3 (:: antes). Actualmente son intercambiables en los navegadores compatibles con CSS2 & CSS3.
Aquí hay una buena explicación: http://www.impressivewebs.com/before-after-css3/
Revisé MDN y w3.org, y lo mejor que podía ocurre es que :: se utiliza para estructurales cambios y : se utiliza para styling.
Actualmente son intercambiables por razones de compatibilidad.
Parece para separar :link (por ejemplo), que los estilos de un <a>, desde :before (que es un cambio estructural ).
: es para el diseño, :: es para la estructura.
AFAIK, el grupo de trabajo CSS decidió prefijo pseudo-elementos con un colon adicional para diferenciarlos de los pseudo-clases que tienen sólo un colon. –
... y dado que la notación de dos puntos no está implementada en IE8, tendremos que esperar 'hasta que se elimine del mercado (como en 2016 más o menos), antes de que podamos comenzar a usar ':: before'. Gran trabajo, Microsoft '-.-' –
Los pseudo-elementos han existido desde CSS1. Los primeros pseudo-elementos fueron ': first-letter' y': first-line'. – BoltClock