Si estás aprendiendo CSS y quieres añadir elementos visuales sin tener que modificar continuamente tu HTML, el pseudoelemento ::before puede convertirse en una herramienta tremendamente útil.
Con ::before puedes insertar contenido generado mediante CSS justo antes del contenido de un elemento, lo que permite crear iconos, líneas, etiquetas, adornos y multitud de efectos visuales.
En esta guía vas a aprender cómo usar ::before en CSS, cuál es su sintaxis y cómo puedes aplicarlo mediante ejemplos que podrás adaptar fácilmente a tu propia página web.
¿Qué es ::before en CSS? 🎨
El pseudoelemento ::before permite crear un elemento virtual que aparece como el primer hijo del elemento HTML sobre el que estás trabajando.
Esto significa que puedes añadir contenido visual sin introducir un nuevo <span>, <div> u otra etiqueta en el HTML.
Por ejemplo, imagina que tienes un título y quieres colocar una pequeña flecha delante del texto sin modificar el código HTML.
<h3 class="titulo">Últimos artículos</h3>
Puedes conseguirlo utilizando únicamente CSS:
.titulo::before {
content: "➜";
margin-right: 8px;
}
El navegador mostrará la flecha antes del contenido del título, aunque dicha flecha realmente no aparezca escrita dentro del HTML.
Sintaxis de ::before en CSS 🧩
La estructura básica de ::before es muy sencilla y normalmente comienza de esta manera:
.elemento::before {
content: "";
}
La propiedad content es imprescindible en la mayoría de usos de ::before, ya que indica al navegador que debe generar el pseudoelemento.
Aunque no quieras introducir texto, normalmente tendrás que utilizar:
content: "";
A partir de ahí puedes aplicar prácticamente las mismas propiedades CSS que utilizarías sobre cualquier otro elemento.
.elemento::before {
content: "";
display: block;
width: 30px;
height: 3px;
background: currentColor;
}
Puedes consultar también la documentación de MDN sobre ::before si quieres profundizar en todas las características disponibles.
Cómo usar ::before paso a paso ✅
Si quieres empezar a utilizar ::before en tu página web, el procedimiento básico es muy sencillo.
- Selecciona el elemento HTML sobre el que quieres añadir el pseudoelemento.
- Añade
::beforedespués del selector CSS correspondiente. - Incluye la propiedad
contentdentro de las reglas CSS. - Define propiedades como tamaño, posición, margen, fondo o color dependiendo del efecto que quieras conseguir.
- Comprueba el resultado en diferentes tamaños de pantalla para asegurarte de que el pseudoelemento se adapta correctamente a tu diseño responsive.
Por ejemplo:
.aviso::before {
content: "!";
font-weight: bold;
margin-right: 10px;
}
Con apenas unas líneas puedes introducir un elemento adicional sin necesidad de alterar la estructura HTML de tu página.
Ejemplo 1: añadir un icono antes de un texto ➜
Uno de los usos más sencillos de ::before consiste en añadir símbolos o pequeños iconos delante de determinados textos.
Supongamos que tienes este HTML:
<p class="destacado">Contenido recomendado</p>
Puedes añadir una estrella utilizando:
.destacado::before {
content: "★";
margin-right: 8px;
}
El resultado visual será similar a:
★ Contenido recomendado
Este recurso puede resultar especialmente práctico para avisos, listas especiales, enlaces destacados o pequeños elementos de navegación.
Ejemplo 2: crear una línea decorativa antes de un título ✨
No tienes que utilizar necesariamente texto dentro de content, porque también puedes crear formas completamente mediante CSS.
Por ejemplo:
.titulo {
position: relative;
padding-left: 20px;
}
.titulo::before {
content: "";
position: absolute;
left: 0;
top: 10%;
width: 4px;
height: 80%;
background: #333;
}
En este caso estás creando una barra vertical decorativa situada justo a la izquierda del título.
Esta técnica resulta muy habitual en diseños de blogs, encabezados, tarjetas y páginas corporativas.
Ejemplo 3: añadir texto automáticamente 📝
::before también permite insertar texto mediante la propiedad content.
Puedes utilizar algo parecido a esto:
.nuevo::before {
content: "Nuevo";
margin-right: 10px;
padding: 3px 6px;
font-size: 12px;
border: 1px solid currentColor;
}
Con esta técnica puedes crear pequeñas etiquetas visuales sin añadir manualmente texto adicional dentro del HTML.
Sin embargo, conviene evitar utilizar ::before para insertar información imprescindible para comprender la página, ya que el contenido verdaderamente importante debería permanecer dentro del HTML.
Ejemplo 4: crear comillas decorativas ❝
Otro efecto interesante consiste en utilizar ::before para decorar citas o testimonios.
.cita {
position: relative;
padding-left: 35px;
}
.cita::before {
content: "“";
position: absolute;
left: 0;
top: -10px;
font-size: 50px;
line-height: 1;
}
Este código genera unas comillas grandes al principio de la cita, creando un efecto visual mucho más atractivo.
Puedes utilizarlo en testimonios de clientes, bloques de citas o reseñas dentro de una página web.
Ejemplo 5: añadir una flecha a los enlaces 🔗
También puedes utilizar ::before para conseguir que determinados enlaces sean más visibles para el usuario.
.enlace::before {
content: "→";
margin-right: 6px;
}
Tu HTML podría mantenerse extremadamente limpio:
<a href="#" class="enlace">Ver más información</a>
Esta solución resulta útil para crear llamadas a la acción sencillas dentro de artículos o páginas de servicios.
Si estás profundizando en CSS, también puedes consultar la sección oficial de CSS del W3C para conocer con mayor profundidad cómo evoluciona el lenguaje.
Ejemplo 6: crear un círculo decorativo 🔵
Los pseudoelementos no están limitados a texto, ya que puedes utilizar anchura, altura, bordes y border-radius para crear formas.
.elemento {
position: relative;
padding-left: 20px;
}
.elemento::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 8px;
height: 8px;
border: 2px solid currentColor;
border-radius: 50%;
transform: translateY(-50%);
}
Este ejemplo crea un pequeño círculo delante del contenido, algo que puede utilizarse para personalizar listas o determinados bloques de información.
Cómo posicionar ::before correctamente 📐
Cuando quieres colocar el pseudoelemento en una ubicación específica suele ser necesario combinar position: relative en el elemento principal y position: absolute en ::before.
Puedes utilizar esta estructura como punto de partida:
.elemento {
position: relative;
}
.elemento::before {
content: "";
position: absolute;
left: 0;
top: 0;
}
El elemento principal se convierte así en la referencia de posicionamiento utilizada por el pseudoelemento.
Después puedes utilizar propiedades como top, left, right y bottom para moverlo exactamente hasta la posición que necesitas.
Diferencias entre ::before y ::after 🔄
CSS también dispone del pseudoelemento ::after, cuyo funcionamiento es prácticamente idéntico a ::before.
La principal diferencia es que ::before genera el pseudoelemento antes del contenido, mientras que ::after lo genera después.
.elemento::before {
content: "←";
}
.elemento::after {
content: "→";
}
Esta combinación permite crear efectos como:
← Contenido →
Ambos pseudoelementos pueden utilizarse conjuntamente para crear bordes personalizados, animaciones, fondos, botones y numerosos efectos decorativos.
Tabla resumen de ::before 📊
| Propiedad | Función | Ejemplo |
|---|---|---|
content | Genera el contenido del pseudoelemento | content: ""; |
display | Define cómo se comporta | display: block; |
position | Permite posicionarlo libremente | position: absolute; |
width | Establece su anchura | width: 20px; |
height | Establece su altura | height: 20px; |
background | Añade un fondo | background: #333; |
border | Permite crear bordes | border: 1px solid; |
border-radius | Permite crear formas redondeadas | border-radius: 50%; |
transform | Mueve, gira o escala el elemento | transform: rotate(45deg); |
margin | Añade separación respecto al contenido | margin-right: 10px; |
Errores frecuentes al utilizar ::before ⚠️
Uno de los errores más habituales consiste en olvidarse de añadir la propiedad content, provocando que el pseudoelemento simplemente no aparezca.
Otro fallo frecuente ocurre cuando utilizas position: absolute pero olvidas asignar position: relative al elemento que debería actuar como referencia.
También debes tener cuidado con el z-index, especialmente cuando utilizas pseudoelementos para crear fondos o efectos situados detrás de otros elementos.
.elemento {
position: relative;
z-index: 1;
}
.elemento::before {
content: "";
position: absolute;
z-index: -1;
}
Comprobar estos pequeños detalles suele solucionar rápidamente la mayoría de problemas relacionados con ::before y ::after.
¿Cuándo deberías utilizar ::before? 💡
::before resulta especialmente recomendable cuando quieres añadir un elemento puramente decorativo que no aporta información esencial al contenido.
Puedes utilizarlo para añadir iconos, líneas, círculos, fondos, flechas, etiquetas decorativas, efectos hover o animaciones.
También resulta útil cuando quieres mantener un HTML más limpio y evitar añadir etiquetas cuyo único propósito sea conseguir determinado diseño.
En cambio, si el contenido añadido tiene importancia semántica, deberías introducirlo directamente en el HTML para conservar una estructura clara y accesible.
Conclusión 🚀
Aprender cómo usar ::before en CSS te permite crear interfaces más elaboradas utilizando menos elementos HTML y manteniendo una estructura mucho más sencilla.
Gracias a la propiedad content puedes introducir símbolos o textos, mientras que combinándola con posicionamiento, dimensiones, bordes y transformaciones puedes construir prácticamente cualquier elemento decorativo.
Empieza con ejemplos sencillos como añadir una flecha o una línea delante de un título y después experimenta con posiciones absolutas, animaciones y efectos más avanzados.
Dominar ::before y ::after ampliará considerablemente tus posibilidades a la hora de personalizar una web utilizando únicamente CSS.
