::before (:before)

En CSS, ::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.

/* Añade un corazón antes de los enlaces */
a::before {
  content: "";
}

Nota: Los pseudo-elementos generados por ::before y ::after son contenidos por la caja de formato del elemento, y por lo tanto, no aplica a elementos de reemplazo como los elementos <img>, o <br>.

Sintaxis

/* CSS3 syntax */
::before

/* CSS2 syntax */
:before

Nota: CSS3 introdujo la notación ::before (con doble dos puntos) para diferenciar pseudo-clases con pseudo-elementos. Los navegadores aceptan :before, añadido en CSS2.

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.

HTML

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

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.

HTML

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

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.

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>

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;
}

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

Caracteres especiales

Como esto es CSS; no HTML, no se pueden usar entidades de marcado en los valores del contenido. Si se necesita usar caracteres especiales, y no se puede ingresar literalmente en la cadena de contenido CSS, se utiliza una secuencia de escape unicode, consistiendo de una barra diagonal invertida (backlash) seguido de un valor unicode hexadecimal.

HTML

<ol>
  <li>Crack Eggs into bowl</li>
  <li>Add Milk</li>
  <li>Add Flour</li>
  <li aria-current='step'>Mix thoroughly into a smooth batter</li>
  <li>Pour a ladleful of batter onto a hot, greased, flat frying pan</li>
  <li>Fry until the top of the pancake loses its gloss</li>
  <li>Flip it over and fry for a couple more minutes</li>
  <li>serve with your favorite topping</li>
</ol>

CSS


li {
  padding:0.5em;
}

li[aria-current='step'] {
  font-weight:bold; 
}

li[aria-current='step']::after {
  content: " \21E6"; /* Hexadecimal for Unicode Leftwards white arrow*/
  display: inline;
}

Especificaciones

Especificación Estatus Comentarios
CSS Pseudo-Elements Level 4
La definición de '::before' en esta especificación.
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
La definición de '::before' en esta especificación.
Recommendation Introduce la sintaxis de doble símbolo :
CSS Level 2 (Revision 1)
La definición de '::before' en esta especificación.
Recommendation Definición inicial, usando la sintaxis de un símbolo :

Compatibilidad de navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
::beforeChrome Soporte completo 1
Soporte completo 1
Soporte completo 1
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : :before
Edge Soporte completo 12
Soporte completo 12
Soporte completo 12
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : :before
Firefox Soporte completo 1.5
Notas
Soporte completo 1.5
Notas
Notas Before Firefox 57, Firefox had a bug where ::before pseudo-elements were still generated, even if the content property value were set to normal or none.
Notas Before Firefox 3.5, only the CSS level 2 behavior of :before was supported, which disallowed position, float, list-style-* and some display properties.
Soporte completo 1
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : :before
IE Soporte completo 9
Soporte completo 9
Soporte completo 8
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : :before
Opera Soporte completo 7
Soporte completo 7
Soporte completo 4
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : :before
Safari Soporte completo 4
Soporte completo 4
Soporte completo 4
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : :before
WebView Android Soporte completo ≤37
Soporte completo ≤37
Soporte completo ≤37
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : :before
Chrome Android Soporte completo 18
Soporte completo 18
Soporte completo 18
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : :before
Firefox Android Soporte completo 4
Notas
Soporte completo 4
Notas
Notas Before Firefox 57, Firefox had a bug where ::before pseudo-elements were still generated, even if the content property value were set to normal or none.
Soporte completo 4
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : :before
Opera Android Soporte completo 10.1
Soporte completo 10.1
Soporte completo 10.1
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : :before
Safari iOS Soporte completo 5.1Samsung Internet Android Soporte completo 1.0
Soporte completo 1.0
Soporte completo 1.0
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : :before
Animation and transition supportChrome Soporte completo 26Edge Soporte completo 12Firefox Soporte completo 4IE Sin soporte NoOpera Soporte completo 15Safari Sin soporte NoWebView Android Soporte completo ≤37Chrome Android Soporte completo 26Firefox Android Soporte completo 4Opera Android Soporte completo 14Safari iOS Sin soporte NoSamsung Internet Android Soporte completo Si

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Ver notas de implementación.
Ver notas de implementación.
Usa un nombre no estandar.
Usa un nombre no estandar.

Véase también