CSS ::before Pseudoelemento

El pseudoelemento ::before de CSS crea un elemento generado que se inserta como el primer hijo del elemento al que apunta, antes de su contenido real. Es uno de los dos pseudoelementos de "contenido generado" (su espejo es ::after), y se usa con mayor frecuencia para añadir iconos decorativos, etiquetas, contadores, comillas o adornos visuales sin tocar el HTML.

Esta página explica qué hace ::before, la propiedad sin la que no puede funcionar, ejemplos ejecutables, los patrones más comunes en el mundo real y los problemas de accesibilidad que debes conocer.

Cómo funciona `::before`

Un pseudoelemento ::before solo se renderiza cuando también se declara la propiedad content — ese valor es lo que se inserta. Sin content, no aparece nada en absoluto (ni siquiera una caja vacía).

Comportamientos clave:

En línea por defecto. Como un <span>, se sitúa en línea con el texto circundante hasta que cambies su display (por ejemplo a inline-block o block).
Es una caja real. Puedes estilizarla, animarla, posicionarla o hacerla flotar como cualquier otro elemento, y hereda los estilos del elemento al que pertenece.
Va primero. ::before se inserta antes del contenido del elemento; ::after se inserta después. Ambos viven dentro del elemento, entre sus etiquetas.
La sintaxis de un solo dos puntos aún funciona. La sintaxis heredada :before (un solo dos puntos) es equivalente y era lo que entendían los navegadores muy antiguos. El doble dos puntos ::before es el estándar moderno que distingue los pseudoelementos de las pseudoclases — úsalo preferentemente.

Información

::before y ::after no funcionan en elementos reemplazados como <br>, <img>, <input> o <video>, porque esos elementos no tienen contenido de documento alrededor del cual insertar contenido generado.

Sintaxis

selector::before {
  content: "value"; /* required */
  /* other declarations */
}

El valor de content puede ser una cadena literal, una imagen (url(...)), el valor de un atributo (attr(...)) o un contador (usado junto con counter-increment). Para una caja puramente decorativa sin texto, usa una cadena vacía: content: "".

Ejemplos

Insertar una etiqueta de texto antes del contenido

Aquí ::before antepone una cadena fija a cada párrafo:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::before { 
        content: "  William Shakespeare -";
      }
    </style>
  </head>
  <body>
    <h2>::before selector example</h2>
    <p>"Be or not to be".</p>
  </body>
</html>

Pruébalo tú mismo »

El texto insertado "William Shakespeare -" aparece directamente delante de la cita, aunque no existe en ningún lugar del HTML.

Estilizar la caja generada

Dado que el pseudoelemento es una caja, puedes darle un fondo, un borde y un valor de display igual que a cualquier elemento normal:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::before { 
        content: "William Shakespeare-";
        display: inline-block;
        background-color: #ccc;
        color: #666;
        border: 2px dotted #000;
      }
    </style>
  </head>
  <body>
    <h2>::before selector example</h2>
    <p>"Be or not to be".</p>
  </body>
</html>

Pruébalo tú mismo »

Casos de uso comunes

::before destaca cuando necesitas decoración que no pertenece al marcado:

Iconos y viñetas — anteponer un símbolo (content: "★") o una imagen url() a enlaces, elementos de lista o botones.
Marcadores de campo obligatorio — añadir un asterisco rojo a las etiquetas: label.required::before { content: "*"; color: red; }.
Comillas de apertura — envolver bloques de cita con comillas tipográficas.
Contadores — combinar con counter-increment para numerar secciones automáticamente.
Obtener valores de atributos — mostrar el atributo propio de un elemento con attr():

abbr[title]::before {
  content: attr(title) ": ";
  font-weight: bold;
}

Accesibilidad y advertencias

content es obligatorio. Si lo olvidas, el pseudoelemento no se genera en absoluto.
Las cajas decorativas necesitan content: "". Para un elemento puramente visual (un divisor, un fondo de icono) establece una cadena vacía para que la caja siga renderizándose.
El texto generado no es seleccionable y la mayoría de los lectores de pantalla lo ignoran o lo leen de forma inconsistente. Nunca pongas información que el usuario deba tener (como instrucciones críticas) solo en ::before.
No se aplica a los elementos reemplazados (<img>, <input>, <br>, etc.).
El punto de inserción importa. ::before es el primer hijo dentro del elemento — no antes de la etiqueta de apertura del elemento.

Nota

Para los pseudoelementos puramente decorativos, establece siempre content: '' para asegurarte de que se rendericen correctamente en todos los navegadores.

Compatibilidad con navegadores

::before es compatible con todos los navegadores modernos. La forma de un solo dos puntos (:before) también está ampliamente soportada y era la sintaxis utilizada antes de CSS3, así que úsala solo si debes dar soporte a navegadores muy antiguos.

Referencias relacionadas

::after — inserta contenido después de un elemento.
content — la propiedad que define lo que inserta ::before.
counter-increment — construye numeración automática con contenido generado.
position — posiciona un elemento generado con precisión.

Práctica

¿Qué hace el pseudoelemento '::before' en CSS?

Inserta contenido antes del contenido del elemento seleccionado.Oculta el contenido antes del elemento seleccionado.Cambia el color del elemento seleccionado.Se usa para estilizar el elemento seleccionado antes de que se apliquen otros estilos.

Cómo funciona ::before