Añadir texto antes de un elemento con CSS es una técnica muy útil cuando quieres mostrar pequeñas etiquetas, avisos, símbolos o contenido decorativo sin modificar directamente el código HTML de tu página.
Gracias al pseudoelemento ::before, puedes insertar contenido visual delante de prácticamente cualquier elemento y controlar completamente su aspecto mediante propiedades CSS.
Esta solución resulta especialmente interesante si trabajas con WordPress, constructores visuales o plugins cuyo HTML no puedes modificar fácilmente.
En este tutorial vas a aprender cómo añadir texto antes de un elemento con CSS, cómo personalizarlo y qué aspectos debes tener en cuenta para utilizar esta técnica correctamente.
Qué es el pseudoelemento ::before en CSS
El pseudoelemento ::before permite crear un elemento virtual que se coloca como primer hijo del elemento HTML seleccionado mediante CSS.
Aunque el contenido aparece visualmente en la página, realmente no estás añadiendo ningún elemento nuevo al HTML.
Para mostrar texto mediante ::before necesitas utilizar obligatoriamente la propiedad content, que determina qué contenido debe aparecer.
La estructura básica es la siguiente:
.elemento::before {
content: "Texto añadido";
}
Con este pequeño fragmento puedes conseguir que «Texto añadido» aparezca justo antes del contenido original del elemento seleccionado.
Puedes consultar más detalles técnicos sobre ::before en MDN Web Docs si quieres profundizar en el funcionamiento de este pseudoelemento.
Cómo añadir texto antes de un elemento con CSS paso a paso
Para añadir texto antes de cualquier elemento solamente necesitas conocer el selector CSS correspondiente y crear una regla utilizando ::before.
Sigue estos pasos:
- 🔍 Identifica el elemento delante del cual quieres insertar el texto utilizando las herramientas para desarrolladores de tu navegador.
- 🏷️ Localiza su clase, identificador o selector CSS para poder apuntar específicamente al elemento correcto.
- ✏️ Añade el pseudoelemento
::beforeinmediatamente después del selector. - 📝 Utiliza la propiedad
contentpara escribir el texto que quieres mostrar. - 🎨 Añade las propiedades CSS necesarias para personalizar el tamaño, color, separación o estilo del texto.
- 💾 Guarda los cambios y comprueba el resultado en diferentes dispositivos para asegurarte de que el diseño sigue siendo responsive.
Por ejemplo, imagina que tienes un elemento HTML con la clase .precio y quieres añadir la palabra «Desde» delante del precio.
.precio::before {
content: "Desde ";
}
Si originalmente aparece 49 €, después de aplicar este CSS el visitante verá Desde 49 €.
Cómo personalizar el texto añadido con ::before
El texto generado mediante ::before puede recibir prácticamente las mismas propiedades visuales CSS que cualquier otro elemento de tu página.
Por ejemplo, puedes cambiar su color, peso tipográfico, tamaño y separación respecto al contenido original.
.precio::before {
content: "Desde ";
color: #666;
font-size: 14px;
font-weight: bold;
margin-right: 5px;
}
En este ejemplo, la palabra «Desde» tendrá un tamaño de 14 píxeles, aparecerá en negrita y tendrá una pequeña separación respecto al precio.
Puedes consultar las diferentes posibilidades de formato disponibles en la documentación de CSS de MDN para combinar esta técnica con otras propiedades.
Cómo añadir texto antes de un título con CSS
También puedes utilizar esta técnica para añadir contenido delante de los encabezados de una página.
Imagina que quieres mostrar la palabra «Tutorial:» antes de todos los títulos h2 incluidos dentro de una determinada sección.
.tutorial h2::before {
content: "Tutorial: ";
}
Con este código conseguirás que el navegador muestre automáticamente «Tutorial:» delante de cada encabezado H2 situado dentro del contenedor .tutorial.
Si solamente quieres modificar un título concreto, resulta recomendable asignarle una clase específica para evitar alterar otros encabezados accidentalmente.
.titulo-especial::before {
content: "Nuevo: ";
}
Esta posibilidad puede resultar especialmente práctica para destacar novedades, categorías o tipos de contenido sin tener que editar cada título manualmente.
Cómo añadir un icono antes de un elemento
La propiedad content no está limitada únicamente a palabras, ya que también puedes introducir símbolos, caracteres Unicode e incluso determinados iconos.
Por ejemplo, puedes colocar una flecha delante de un enlace.
.enlace::before {
content: "→ ";
}
También puedes utilizar un emoji para conseguir un resultado más llamativo.
.destacado::before {
content: "⭐ ";
}
Esta técnica puede ayudarte a crear listas visuales, avisos, enlaces destacados o pequeños elementos decorativos utilizando muy poco código.
Añadir espacio entre el texto y el elemento original
Uno de los problemas más habituales al utilizar ::before es que el contenido añadido puede aparecer demasiado pegado al texto original.
Puedes solucionarlo incluyendo directamente un espacio dentro de la propiedad content.
.elemento::before {
content: "Oferta: ";
}
Otra opción más flexible consiste en utilizar margin-right, especialmente cuando quieres controlar la distancia con precisión.
.elemento::before {
content: "Oferta:";
margin-right: 8px;
}
El uso de margen suele ser preferible cuando estás diseñando una interfaz porque te permite ajustar posteriormente la separación sin modificar el contenido.
Añadir estilos de etiqueta al texto generado
También puedes transformar el pseudoelemento en una pequeña etiqueta visual o badge utilizando propiedades como background, padding y border-radius.
.producto::before {
content: "Oferta";
background: #222;
color: white;
padding: 3px 7px;
border-radius: 4px;
margin-right: 8px;
font-size: 12px;
}
Con este ejemplo conseguirás mostrar una etiqueta «Oferta» delante del contenido, algo especialmente útil para productos, promociones o bloques destacados.
Puedes experimentar con propiedades como border-radius, padding o background-color para adaptar completamente el diseño a tu página.
Añadir texto antes de un elemento al pasar el ratón
También puedes combinar ::before con pseudoclases como :hover para cambiar el contenido cuando el usuario pasa el cursor sobre un elemento.
.boton::before {
content: "→ ";
}
.boton:hover::before {
content: "✓ ";
}
En este caso, la flecha inicial se transforma en una marca de verificación cuando el visitante sitúa el cursor sobre el botón.
Esta combinación permite crear pequeñas interacciones visuales sin utilizar JavaScript.
Diferencia entre ::before y ::after
CSS dispone de dos pseudoelementos especialmente utilizados para generar contenido: ::before y ::after.
Como probablemente hayas deducido, ::before inserta contenido antes del contenido original, mientras que ::after lo coloca después.
.elemento::before {
content: "Antes - ";
}
.elemento::after {
content: " - Después";
}
Puedes consultar también la documentación de ::after para entender mejor las diferencias entre ambos.
Tabla resumen para añadir texto antes de un elemento
| Objetivo | Código CSS | Uso recomendado |
|---|---|---|
| Añadir texto | .elemento::before { content: "Texto "; } | Etiquetas y palabras |
| Añadir un símbolo | .elemento::before { content: "→ "; } | Enlaces y botones |
| Añadir un emoji | .elemento::before { content: "⭐ "; } | Elementos destacados |
| Separar contenido | margin-right: 8px; | Mejorar legibilidad |
| Cambiar el color | color: #555; | Diferenciar el texto |
| Crear una etiqueta | background + padding | Ofertas y avisos |
| Cambiar al hacer hover | .elemento:hover::before | Interacciones visuales |
Cómo utilizar ::before en WordPress
Si utilizas WordPress, puedes aplicar esta técnica para modificar visualmente elementos generados por tu tema, WooCommerce o determinados plugins sin editar sus archivos originales.
Una vez localizado el selector correspondiente, puedes introducir el código desde el apartado destinado al CSS personalizado de tu tema o constructor visual.
Por ejemplo, podrías añadir automáticamente la palabra «Precio:» delante del precio de determinados productos utilizando una clase específica.
.precio-producto::before {
content: "Precio: ";
font-weight: bold;
}
Antes de utilizar un selector demasiado general, comprueba siempre mediante las herramientas para desarrolladores del navegador qué elementos se verán afectados.
Errores frecuentes al utilizar ::before
Uno de los errores más habituales consiste en escribir el pseudoelemento correctamente pero olvidar la propiedad content.
.elemento::before {
color: red;
}
El código anterior no mostrará ningún texto porque ::before necesita generar contenido antes de poder mostrarlo visualmente.
Otro problema frecuente consiste en utilizar un selector demasiado amplio y terminar añadiendo el texto a decenas de elementos que no querías modificar.
También debes evitar utilizar ::before para introducir información esencial para comprender el contenido, ya que el texto generado mediante CSS tiene ciertas limitaciones desde el punto de vista semántico y de accesibilidad.
Para contenidos importantes, lo recomendable sigue siendo añadir el texto directamente en el HTML.
Cuándo merece la pena añadir texto mediante CSS
Utilizar ::before resulta especialmente apropiado cuando el contenido añadido tiene una función decorativa, auxiliar o repetitiva.
Puedes utilizarlo para añadir símbolos delante de enlaces, etiquetas visuales, pequeños avisos, iconos, separadores o elementos que se repiten continuamente en una página.
Sin embargo, si el texto contiene información relevante para el usuario o para los motores de búsqueda, es preferible incluirlo directamente dentro del HTML.
La clave consiste en utilizar ::before como una herramienta de presentación y diseño, evitando convertir CSS en un sustituto del contenido estructural de tu página.
Conclusión
Aprender cómo añadir texto antes de un elemento con CSS puede ahorrarte bastante trabajo cuando necesitas introducir pequeños textos, etiquetas o elementos decorativos sin modificar directamente el HTML.
En la mayoría de situaciones solamente necesitas utilizar el selector adecuado, añadir ::before y definir la propiedad content para conseguir el resultado.
A partir de ahí puedes combinarlo con colores, márgenes, fondos, bordes, tamaños de fuente y otras propiedades para integrar perfectamente el contenido generado dentro del diseño de tu web.
Si trabajas habitualmente con WordPress o personalizas páginas mediante CSS, dominar ::before y ::after te proporcionará una herramienta sencilla pero extraordinariamente versátil para resolver multitud de pequeños detalles de diseño.
