9

En varios ejemplos en internet he encontrado que utilizan a veces :before y otras veces ::before

div::before {
  content: 'bla ';
}

div:before {
  content: 'bla ';
}

Los probé ambos y siempre me funcionan, entonces no entiendo si hay alguna diferencia (o no), o cuál de los dos debería usar, o si realmente no importa y puedo usar ambos en cualquier situación.

1 respuesta 1

7
  • ::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

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.