Docs ejecutables de CSS: ::before y ::after

Q: ¿Por qué no se muestra mi ::before o ::after?

La razón más común es que falta la propiedad content: sin ella el pseudoelemento no se genera. Usa content: "" para una caja decorativa vacía. Otras causas: un pseudoelemento inline con ancho y alto (dale display: block o inline-block), o un elemento como o que no puede contenerlos.

Q: ¿Qué diferencia hay entre :before y ::before?

Ninguna en el comportamiento. ::before con dos signos de dos puntos es la sintaxis actual que marca los pseudoelementos; :before con uno es la forma antigua de CSS2, que los navegadores siguen aceptando para before, after, first-line y first-letter.

Q: ¿Los lectores de pantalla leen el contenido de ::before?

En general sí: el texto de content suele incluirse en el nombre accesible, pero no se puede seleccionar ni copiar. Deja la información real en el HTML y usa los pseudoelementos para decoración y pequeñas pistas visuales.

Qué hacen ::before y ::after

::before inserta una caja como primer hijo de un elemento y ::after como último hijo. Lo que va dentro de la caja lo define la propiedad content. No se agrega nada al HTML: el navegador lo genera desde el CSS.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>before and after</title>
  <style>
    .price::before { content: "$"; color: #16a34a; }
    .price::after { content: " / month"; color: #6b7280; font-size: 14px; }
    .done::before { content: "✓ "; color: #16a34a; font-weight: bold; }
  </style>
</head>
<body>
  <p class="price">9</p>
  <p class="done">Tests pass</p>
</body>
</html>

El HTML solo contiene 9 y Tests pass. El signo de dólar, la etiqueta "/ month" y la marca de verificación vienen del CSS. Heredan los estilos del elemento (fuente, color) salvo que los sobrescribas, como hacen los ejemplos de arriba.

Sintaxis

selector::before {
  content: "text";   /* required */
  /* any other styles */
}

selector::after {
  content: "";       /* empty string: a box with no text */
}

Valor de `content`	Resultado
`"text"`	Un string. Usa `"\A"` para un salto de línea (con `white-space: pre`) y `"\2192"` para un carácter Unicode (→)
`""`	Una caja vacía, para formas y decoraciones
`attr(data-label)`	El valor de un atributo del elemento
`counter(step)`	El valor de un contador CSS
`open-quote` / `close-quote`	Comillas según el idioma del elemento
`none` o `normal`	Sin pseudoelemento (`normal` es el valor por defecto)

content es obligatorio. Sin él, ::before y ::after nunca se crean, por muchas otras propiedades que les pongas.

Formas decorativas con content: ""

Con content: "", el pseudoelemento es una caja vacía a la que puedes dar tamaño y color. Por defecto es inline, y una caja inline ignora width y height, así que dale display: block, inline-block o position: absolute:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Shapes</title>
  <style>
    .status::before {
      content: "";
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #16a34a;
      margin-inline-end: 8px;
    }
    .status.offline::before { background: #e5e7eb; }

    .heading::after {
      content: "";
      display: block;
      width: 48px;
      height: 4px;
      background: #2563eb;
      margin-top: 6px;
      border-radius: 2px;
    }
  </style>
</head>
<body>
  <h2 class="heading">Section title</h2>
  <p class="status">Online</p>
  <p class="status offline">Offline</p>
</body>
</html>

Posicionar un pseudoelemento

Para una decoración que va encima o alrededor del elemento, usa position: absolute en el pseudoelemento y position: relative en el propio elemento, así los desplazamientos se miden desde el elemento:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline on hover</title>
  <style>
    .link {
      position: relative;
      color: #2563eb;
      text-decoration: none;
      font-size: 20px;
    }
    .link::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -4px;
      width: 100%;
      height: 2px;
      background: currentColor;
      transform: scaleX(0);
      transition: transform 0.25s;
    }
    .link:hover::after { transform: scaleX(1); }

    .card { position: relative; border: 2px solid #e5e7eb; padding: 16px; margin-top: 24px; }
    .card::before {
      content: "NEW";
      position: absolute;
      top: -12px;
      right: 12px;
      background: #f59e0b;
      padding: 2px 8px;
      font-size: 12px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <a class="link" href="#">Hover this link</a>
  <div class="card">A card with a badge from ::before</div>
</body>
</html>

Fíjate en el orden al combinarlo con una pseudoclase: primero va el estado y luego el pseudoelemento, .link:hover::after, nunca .link::after:hover.

attr() lleva el valor de un atributo a content, así una sola regla puede mostrar un texto distinto en cada elemento:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Tooltip</title>
  <style>
    [data-tip] { position: relative; border-bottom: 1px dotted #2563eb; cursor: help; }
    [data-tip]::after {
      content: attr(data-tip);
      position: absolute;
      bottom: 125%;
      left: 0;
      background: #111827;
      color: white;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 13px;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s;
    }
    [data-tip]:hover::after { opacity: 1; }
    p { margin-top: 48px; }
  </style>
</head>
<body>
  <p>Hover <span data-tip="HyperText Markup Language">HTML</span> or
     <span data-tip="Cascading Style Sheets">CSS</span>.</p>
</body>
</html>

Un tooltip que solo aparece con hover es invisible para quienes usan teclado o pantalla táctil. Para cualquier cosa importante, pon el texto en la página, o muéstralo también con :focus y tabindex="0" en el elemento.

Numerar con contadores

Los contadores CSS y ::before numeran elementos sin escribir los números:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Counters</title>
  <style>
    .steps { counter-reset: step; padding: 0; }
    .steps li { list-style: none; counter-increment: step; margin: 8px 0; }
    .steps li::before {
      content: counter(step);
      display: inline-block;
      width: 24px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      border-radius: 50%;
      background: #2563eb;
      color: white;
      margin-inline-end: 8px;
    }
  </style>
</head>
<body>
  <ol class="steps">
    <li>Write the HTML</li>
    <li>Add the CSS</li>
    <li>Open it in a browser</li>
  </ol>
</body>
</html>

Agrega o quita un paso y los números se actualizan solos.

Dónde no funcionan ::before y ::after

Los pseudoelementos se insertan dentro del elemento, entre sus etiquetas. Los elementos que no tienen un interior para ellos no pueden mostrarlos:

<img>, <video>, <iframe> (elementos reemplazados)
<input>, <select>, <textarea> (controles de formulario) y <br>

Algunos navegadores los dibujan en un checkbox o en una imagen rota, pero no de forma consistente. Pon el pseudoelemento en un contenedor: <span class="field"><input></span> y da estilo a .field::after.

Errores comunes

Sin content. Es la razón más común de que no se vea nada. Agrega content: "".
Dar tamaño a un pseudoelemento inline. width y height no hacen nada hasta que pones display: block, inline-block o position: absolute.
Orden incorrecto con un estado. a:hover::after funciona; a::after:hover no.
Posición absoluta sin un padre posicionado. El pseudoelemento se alinea entonces con algún ancestro lejano. Agrega position: relative al elemento.
Poner contenido real en el CSS. El texto de content no se puede seleccionar ni copiar. Deja la información en el HTML.

Preguntas frecuentes

¿Qué hace ::before en CSS?

Crea un pseudoelemento que es el primer hijo del elemento seleccionado, con lo que indique la propiedad content. ::after hace lo mismo como último hijo. Ninguno de los dos existe en el HTML, así que son útiles para íconos, etiquetas y decoraciones.

¿Por qué no se muestra mi ::before o ::after?

La razón más común es que falta la propiedad content: sin ella el pseudoelemento no se genera. Usa content: "" para una caja decorativa vacía. Otras causas: un pseudoelemento inline con ancho y alto (dale display: block o inline-block), o un elemento como <img> o <input> que no puede contenerlos.

¿Qué diferencia hay entre :before y ::before?

Ninguna en el comportamiento. ::before con dos signos de dos puntos es la sintaxis actual que marca los pseudoelementos; :before con uno es la forma antigua de CSS2, que los navegadores siguen aceptando para before, after, first-line y first-letter.

¿Puedo usar ::before en un img o un input?

No de forma fiable. Los pseudoelementos se insertan dentro del contenido del elemento, y los elementos reemplazados como <img> y los controles de formulario como <input> no tienen una caja de contenido para ellos. Envuelve el elemento en un <span> o un <div> y pon el pseudoelemento en el contenedor.

¿Los lectores de pantalla leen el contenido de ::before?

En general sí: el texto de content suele incluirse en el nombre accesible, pero no se puede seleccionar ni copiar. Deja la información real en el HTML y usa los pseudoelementos para decoración y pequeñas pistas visuales.

Conceptos relacionados