Curso de CSS / pseudoelementos: ::before y ::after

CSS

Creado 2026-11-07 Última modificación 2026-11-07

Los pseudoelementos de CSS estilizan una parte particular de un elemento o crean una caja solo para presentación. ::before y ::after pueden agregar contenido decorativo, pero la información esencial debe permanecer en el HTML en lugar de depender del contenido generado.

Distingue pseudoclases y pseudoelementos

Las pseudoclases de CSS seleccionan en qué estado o condición se encuentra un elemento existente. a:hover apunta al propio enlace sobre el que se pasa el ratón. Un pseudoelemento apunta a una parte específica del elemento o su representación creada. a::after decora un pseudoelemento creado después del contenido del enlace. En código nuevo, usa un solo dos puntos para pseudo-clases y dos puntos para pseudoelementos para facilitar la distinción entre los dos.

a:hover { color: #1d4ed8; }
a::after { content: ""; }

before y after no añaden etiquetas HTML hermanas fuera del elemento seleccionado. Generan cajas antes y después de su contenido. Las herramientas de desarrollo pueden mostrar pseudoelementos como líneas separadas, pero esto no es lo mismo que tener spans escritos en el HTML original. No puedes simplemente recuperar pseudoelementos creados por código que busca elementos hijos comunes.

Comprende content y display

h1::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: currentColor;
}

content: "" crea un pseudoelemento sin texto. Incluso si el contenido está vacío, puede aparecer como un cuadro decorativo si le das un fondo y un tamaño. Por otro lado, si se omite el contenido o se cambia a none, este pseudoelemento no se crea y el punto no aparece incluso si se agregan tamaño y fondo.

La visualización predeterminada de ::before y ::after es en línea. Usa inline-block para un punto decorativo que necesite ancho y alto explícitos, y block para una línea debajo del contenido. Para estos pseudoelementos, omitir content o configurarlo como none evita que se genere el cuadro. Para más detalles, consulta CSS display: block, inline, inline-block y ocultación. Consulta MDN: ::before.

currentColor es una palabra clave que se refiere al valor del color del elemento, es decir, el color actual del texto. Si cambias el título de verde a azul, el fondo del pseudoelemento también usará el mismo color. border-radius: 50% redondea las esquinas de los cuadros de igual ancho y alto para que parezcan círculos. margin-right es el espacio externo entre puntos y letras.

Agrega un punto antes de un encabezado y una línea después de un enlace

El siguiente ejemplo completo crea un punto de 12px antes del título y una línea de 2px debajo del enlace. También deja el subrayado predeterminado en el propio enlace, por lo que la separación del enlace se mantiene incluso si la línea extra desaparece. Al pasar el mouse o al enfocar con el teclado, las líneas decorativas se hacen más gruesas a 4px.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Small Garden</title>
  <style>
body { margin: 24px; font-family: sans-serif; line-height: 1.7; color: #333; }
    h1 { color: #087f5b; font-size: 30px; }
    h1::before {
      content: "";
      display: inline-block;
      width: 12px;
      height: 12px;
      margin-right: 10px;
      border-radius: 50%;
      background-color: currentColor;
    }
    a { display: inline-block; color: #087f5b; text-decoration: underline; }
    a::after {
      content: "";
      display: block;
      height: 2px;
      margin-top: 4px;
      background-color: currentColor;
    }
    a:hover::after, a:focus-visible::after { height: 4px; }
    a:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 4px; }
  </style>
</head>
<body>
<h1>Small Garden</h1>
  <p>We open at 9 a.m. every day.</p>
  <a href="#visit">Visitor Information</a>
  <h2 id="visit">What to bring</h2>
  <p>Bring a water bottle and comfortable shoes.</p>
</body>
</html>

Guárdalo como index.html y ejecútalo. El título mantiene el texto real “Small Garden” y el círculo al frente es una decoración de CSS. El enlace también tiene el nombre “Visitor Information” y una dirección de destino en el HTML. a:hover::after es una expresión que selecciona el after de a en el estado hover. Las notaciones largas parecen menos complicadas si las lees por separado según el número de dos puntos y el orden de la selección.

El diagrama ilustra el mismo HTML con y sin los pseudoelementos decorativos. El texto y el destino del enlace permanecen sin cambios. En el ejemplo completo, la línea decorativa del enlace tiene una altura de 2px por defecto y se convierte en 4px al pasar el cursor o al recibir el enfoque visible del teclado.

Mantén la información esencial en HTML

Qué poner en	Ubicación recomendada	razón
Punto antes del título, línea divisoria	Pseudo-elementos de CSS	Incluso sin él, se mantiene el significado del documento y cómo trabajas con él.
Horario de atención, precios, precauciones	Texto HTML	Incluso si apagas CSS o lo lees de una manera diferente, la información importante debería permanecer.
Nombre del botón, nombre del enlace	Contenido real en HTML	Evita que el nombre del control dependa de la creación de decoración.

Los diferentes lectores de pantalla y navegadores pueden mostrar el contenido generado de manera distinta, así que no confíes en poner información esencial únicamente en pseudoelementos. Es más claro escribir las condiciones en la etiqueta real o en la frase de orientación que informar las condiciones de entrada con content: "Required". El simple hecho de que un pseudoelemento sea visible no confirma su accesibilidad.

before y after no se generan en elementos reemplazados como img, cuyo contenido procede de un recurso externo. Aplícalos a elementos que contienen contenido, como h1 o a en este ejemplo. Si necesitas decorar una imagen, puedes envolverla en otro elemento HTML y usar los pseudoelementos de ese contenedor.

Diagnostica pseudoelementos que no aparecen

Reemplaza content: ""; en h1::before con content: none;. El texto del título debe permanecer igual, pero solo el punto debe desaparecer. Después de la confirmación, restablécelo a una cadena vacía.
Reemplaza display: inline-block; en el punto por display: inline;. Observa que las decoraciones en línea sin texto no pueden mantener el punto original de 12 px solo con ancho·alto. Vuelve a inline-block.
Cambia el color de h1 a #1d4ed8. Asegúrate de que los puntos también sean de color azul y que los enlaces permanezcan verdes. currentColor no se refiere a un solo color en toda la página.
Pasa el mouse sobre el enlace y verifica si la línea se vuelve más gruesa. Aleja el mouse y usa Tab para mover el enfoque al enlace y verifica si la línea y el contorno son visibles juntos.

Al verificar, primero comprueba si el selector coincide con el elemento real y si el contenido es válido, luego observa la visualización, el tamaño y el fondo. Si cambias la altura de la línea del enlace a 0, la línea no será visible, pero el pseudoelemento en sí creado como contenido no necesariamente desaparecerá. Distinguir entre “el elemento no fue creado” y “fue creado pero no tiene área de dibujo” puede ayudarte a reducir la causa del fallo.

Después del ejercicio, restaura los valores originales y guarda. Los pseudoelementos pueden aportar decoración sin elementos HTML adicionales, pero el contenido esencial debe permanecer disponible independientemente de esa decoración. Comienza con un punto o línea y verifica que el texto real, el destino del enlace y el comportamiento del teclado permanezcan intactos.

CSS