MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

::before (:before)

Resumen

::before crea un pseudo-elemento que es el primer hijo del elemento seleccionado. Es usado normalmente para añadir contenido estético a un elemento, usando la propiedad content. Este elemento se muestra en línea con el texto de forma predeterminada.

Sintaxis

/* CSS3 syntax */
::before { style properties }

/* CSS2 syntax */
:before { style properties }

La notación ::before (con dos símbolos :) fue introducida en CSS3 para establecer la diferencia entre pseudo-clases y pseudo-elementos. Los navegadores también aceptan la notación :before, introducida en CSS 2.

Ejemplos

Añadiendo comillas

Un ejemplo simple del uso del pseudo-elemento ::before es el proporcionar comillas. Aquí, usamos ::before y ::after para insertar caracteres de comillas.

Contenido HTML

<q>Some quotes</q>, he said, <q>are better than none</q>.

Contenido CSS

q::before { 
  content: "«";
  color: blue;
}
q::after { 
  content: "»";
  color: red;
}

Resultado

Ejemplo decorativo

Podemos estilizar el texto o imágenes en la propiedad content de casi cualquier forma que queramos.

Contenido HTML

<span class="ribbon">Notice where the orange box is.</span>

Contenido CSS

.ribbon {
  background-color: #5BC8F7;
}

.ribbon::before {
  content: "Look at this orange box.";
  background-color: #FFBA10;
  border-color: black;
  border-style: dotted;
}

Resultado

Lista de tareas

En este ejemplo, creamos una lista de tareas simple usando pseudo-elementos. Este método puede ser usado comúnmente para añadir detalles a la interfaz y mejorar su experiencia de usuario.

Contenido HTML

<ul>
  <li>Buy milk</li>
  <li>Take the dog for a walk</li>
  <li>Exercise</li>
  <li>Write code</li>
  <li>Play music</li>
  <li>Relax</li>
</ul>

Contenido CSS

li {
  list-style-type: none;
  position: relative;
  margin: 2px;
  padding: 0.5em 0.5em 0.5em 2em;
  background: lightgrey;
  font-family: sans-serif;
}

li.done {
  background: #CCFF99;
}

li.done::before {
  content: '';
  position: absolute;
  border-color: #009933;
  border-style: solid;
  border-width: 0 0.3em 0.25em 0;
  height: 1em;
  top: 1.3em;
  left: 0.6em;
  margin-top: -1em;
  transform: rotate(45deg);
  width: 0.5em;
}

Contenido JavaScript

var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
  if( ev.target.tagName === 'LI') {
     ev.target.classList.toggle('done'); 
  }
}, false);

Aquí se está ejecutando el ejemplo de arriba. Nótese que no se están usando íconos, y la marca de selección en realidad es el pseudo-elemento ::before que ha sido estilizado en CSS. Puedes interactuar con el ejemplo para ver los cambios.

Resultado

Notas

Aunque las correcciones en posisionamiento de Firefox 3.5 no permiten que el contenido sea generado como un adyascente previo (como establece la especificación CSS: "Los pseudo-elementos :before y :after interactúan con otras cajas... como si fueran elementos reales insertados dentro de su elemento asociado."), pueden ser usados para proveer una leve mejora a diseños sin estructura de tabla (por ejemplo, para centrar elementos), mientras el contenido que será centrado esté envuelto en un siguiente hijo, se puede introducir una columna antes y después del contenido sin añadir elementos adyascentes (es decir, es quizá más semánticamente correcto añadir un span adicional como en el ejemplo siguiente, que un <div/> vacío antes y después). (Y recuerda siempre añadir anchura a un elemento flotante, pues, de lo contrario, ¡no será flotante!)

Contenido HTML

<div class="example">
<span id="floatme">"Floated Before" should be generated on the left of the 
viewport and not allow overflow in this line to flow under it. Likewise 
should "Floated After" appear on the right of the viewport and not allow this 
line to flow under it.</span>
</div>

Contenido CSS

#floatme { float: left; width: 50%; }

/* To get an empty column, just indicate a hex code for a non-breaking space: \a0 as the content (use \0000a0 when following such a space with other characters) */
.example::before {
  content: "Floated Before";
  float: left;
  width: 25%
}
.example::after {
  content: "Floated After";
  float: right;
  width:25%
}

/* For styling */
.example::before, .example::after, .first {
  background: yellow;
  color: red;
}

Resultado

Especificaciones

Especificación Estatus Comentarios
CSS Pseudo-Elements Level 4
The definition of '::before' in that specification.
Working Draft Sin cambios significativos desde la especificación previa.
CSS Transitions Working Draft Permite transiciones en propiedades definidas a los pseudo-elementos.
CSS Animations Working Draft Permite animaciones en propiedades definidas a los pseudo-elementos.
Selectors Level 3
The definition of '::before' in that specification.
Recommendation Introduce la sintaxis de doble símbolo :
CSS Level 2 (Revision 1)
The definition of '::before' in that specification.
Recommendation Definición inicial, usando la sintaxis de un símbolo :

Compatibilidad de navegadores

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Soporte para :before (Yes) 1.0 (1.7 or earlier)[1] 8.0 4 4.0
Soporte para ::before (Yes) 1.5 (1.8)[1] 9.0 7 4.0
Soporte para animaciones y transiciones 26 4.0 (2.0) No support No support No support
Característica Android Chrome Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Soporte para :before (Yes) (Yes) (Yes) ? ? ?
Soporte para ::before (Yes) (Yes) (Yes) 7.1 ? 5.1
Soporte para animaciones y transiciones 26 (Yes) 4.0 (4.0) No support No support No support

[1] Firefox, previo a su versión 3.5, solo implementaba la versión CSS 2.0 de :before. No se permitía position, float, list-style-* y otras propiedades de presentación. Firefox 3.5 eliminó esas restricciones.

Véase también

Etiquetas y colaboradores del documento

 Colaboradores en esta página: israel-munoz, Yisus777, teoli, Nathymig
 Última actualización por: israel-munoz,