Si alguna vez has querido mostrar con CSS el contenido de un atributo HTML, la función attr() combinada con la propiedad content te permite hacerlo de una forma sorprendentemente sencilla.
Esta técnica resulta especialmente útil cuando quieres generar textos dinámicos mediante CSS sin tener que duplicar información dentro del código HTML.
Aunque attr() tiene algunas limitaciones importantes, entender cómo funciona puede ayudarte a crear interfaces más flexibles, tooltips, etiquetas, mensajes y elementos decorativos utilizando únicamente HTML y CSS.
En este tutorial vas a aprender cómo utilizar attr() dentro de content en CSS, cuándo puede resultarte útil y qué errores debes evitar. 🎨
¿Qué es attr() en CSS?
La función attr() de CSS permite recuperar el valor de un atributo perteneciente al elemento HTML seleccionado.
Por ejemplo, imagina que tienes un enlace con un atributo data-texto que contiene información adicional.
<a href="#" data-texto="Visitar página">Enlace</a>
CSS puede leer ese atributo utilizando attr(data-texto) y mostrar su contenido mediante un pseudoelemento.
a::after {
content: attr(data-texto);
}
El navegador tomará automáticamente el contenido de data-texto y lo insertará visualmente después del texto del enlace. ✨
Esto significa que no necesitas escribir dos veces el mismo texto si esa información ya se encuentra almacenada en un atributo HTML.
Cómo funciona content en CSS
La propiedad content permite generar contenido desde CSS, aunque normalmente debe utilizarse junto con los pseudoelementos ::before y ::after.
Por ejemplo, puedes añadir un pequeño símbolo delante de todos los enlaces con unas pocas líneas de CSS.
a::before {
content: "→ ";
}
El navegador mostrará la flecha antes del contenido original sin modificar directamente el HTML.
Sin embargo, content también puede recibir el valor obtenido mediante attr(), haciendo que el contenido generado dependa de los atributos de cada elemento.
.elemento::after {
content: attr(data-info);
}
Esta combinación convierte content y attr() en una herramienta bastante versátil para mostrar información dinámica almacenada dentro del marcado HTML.
Sintaxis básica de attr() dentro de content
La estructura más sencilla consiste en seleccionar un pseudoelemento y utilizar el nombre del atributo dentro de attr().
.elemento::after {
content: attr(data-texto);
}
El HTML correspondiente podría ser este.
<span class="elemento" data-texto="Contenido adicional">
Ejemplo
</span>
Visualmente podrías obtener algo parecido a “Ejemplo Contenido adicional”, aunque el texto añadido seguirá siendo contenido generado mediante CSS.
La estructura básica que debes recordar es:
selector::after {
content: attr(nombre-del-atributo);
}
Puedes consultar información adicional sobre attr() en MDN Web Docs si quieres profundizar en su funcionamiento y compatibilidad.
Cómo utilizar attr() dentro de content paso a paso
Para empezar a utilizar esta técnica en tu página web puedes seguir estos pasos. 👇
- Añade un atributo al elemento HTML del que quieras obtener información.
<span class="producto" data-precio="29,95 €">
Camiseta
</span>
- Selecciona el elemento mediante CSS utilizando su clase, identificador o cualquier otro selector válido.
.producto {
font-weight: bold;
}
- Crea un pseudoelemento
::beforeo::afterpara insertar el contenido generado.
.producto::after {
content: attr(data-precio);
}
- Añade texto adicional si quieres contextualizar el valor recuperado desde el atributo.
.producto::after {
content: " - Precio: " attr(data-precio);
}
- Aplica estilos al pseudoelemento como harías con prácticamente cualquier otro elemento CSS.
.producto::after {
content: " - Precio: " attr(data-precio);
font-size: 14px;
font-weight: normal;
}
El navegador mostrará automáticamente el precio correspondiente a cada producto según su atributo data-precio.
Combinar texto con attr() dentro de content
Uno de los aspectos más interesantes de content es que puedes combinar cadenas de texto y valores obtenidos mediante attr().
Supongamos que tienes el siguiente HTML.
<span class="usuario" data-nombre="Carlos">
Usuario conectado
</span>
Puedes mostrar el nombre almacenado dentro de data-nombre utilizando este CSS.
.usuario::after {
content: " - Nombre: " attr(data-nombre);
}
El resultado visible sería similar a “Usuario conectado – Nombre: Carlos”.
También puedes combinar diferentes atributos dentro de una misma propiedad content.
<span
class="persona"
data-nombre="Carlos"
data-ciudad="Madrid">
Perfil
</span>
.persona::after {
content: " - " attr(data-nombre) " - " attr(data-ciudad);
}
Esta posibilidad puede resultar especialmente útil cuando trabajas con atributos personalizados data-*, cuya documentación puedes consultar en la guía de atributos de datos de MDN.
Mostrar la URL de un enlace utilizando attr()
Un ejemplo clásico consiste en utilizar attr() para mostrar automáticamente la dirección URL de los enlaces.
Imagina este enlace.
<a href="https://www.ejemplo.com">
Visitar ejemplo
</a>
Puedes recuperar el contenido de href directamente desde CSS.
a::after {
content: " (" attr(href) ")";
}
El navegador mostrará algo parecido a:
Visitar ejemplo (https://www.ejemplo.com)
Esta técnica puede ser interesante para hojas de estilo destinadas a impresión, donde resulta conveniente mostrar las direcciones completas de los enlaces.
@media print {
a::after {
content: " (" attr(href) ")";
}
}
De esta forma, una persona que imprima la página podrá ver también la URL asociada al enlace, aunque normalmente esta información no aparezca en pantalla. 🖨️
Crear un tooltip con attr() y content
Otro uso muy popular consiste en crear tooltips mediante atributos data-*.
Puedes comenzar con un elemento HTML como este.
<span class="tooltip" data-tooltip="Información adicional">
Pasa el ratón
</span>
Después puedes utilizar el valor de data-tooltip dentro de un pseudoelemento.
.tooltip {
position: relative;
}
.tooltip::after {
content: attr(data-tooltip);
position: absolute;
left: 0;
top: 100%;
display: none;
padding: 6px 10px;
background: #222;
color: #fff;
white-space: nowrap;
}
.tooltip:hover::after {
display: block;
}
Cuando el usuario coloque el cursor sobre el elemento aparecerá el texto almacenado dentro del atributo data-tooltip. 💬
Este sistema es adecuado para pequeños elementos informativos, aunque para componentes importantes debes valorar también aspectos como accesibilidad, navegación mediante teclado y lectores de pantalla.
Utilizar attr() con ::before
Aunque muchos ejemplos utilizan ::after, también puedes insertar el contenido antes del elemento mediante ::before.
<span class="categoria" data-categoria="CSS">
Tutorial
</span>
.categoria::before {
content: "[" attr(data-categoria) "] ";
}
El resultado sería similar a:
[CSS] Tutorial
La elección entre ::before y ::after dependerá simplemente de dónde quieras mostrar visualmente el contenido generado.
Tabla resumen de attr() y content
| Elemento | Función | Ejemplo |
|---|---|---|
attr() | Obtiene el valor de un atributo HTML | attr(data-texto) |
content | Define contenido generado mediante CSS | content: "Hola"; |
::before | Inserta contenido antes del elemento | .item::before |
::after | Inserta contenido después del elemento | .item::after |
data-* | Permite almacenar información personalizada | data-precio="20 €" |
href | Puede recuperarse mediante attr() | attr(href) |
| Combinación | Mezcla texto fijo y atributos | content: "Precio: " attr(data-precio); |
¿Puedes utilizar attr() con cualquier propiedad CSS?
Uno de los detalles más importantes que debes conocer es que el soporte tradicional de attr() está principalmente asociado a la propiedad content.
Seguramente encontrarás ejemplos donde se intenta utilizar algo parecido a esto.
.elemento {
width: attr(data-width);
}
El problema es que el soporte de attr() fuera de content ha sido históricamente mucho más limitado y depende de las capacidades actuales del navegador.
Las especificaciones modernas de CSS amplían considerablemente las posibilidades de attr(), pero antes de utilizar características avanzadas en producción conviene consultar su compatibilidad real entre navegadores.
Puedes revisar el soporte actualizado utilizando herramientas como Can I Use antes de incorporar determinadas funciones CSS a proyectos importantes.
Diferencia entre attr() y variables CSS
Aunque puedan parecer similares, attr() y las variables CSS cumplen funciones diferentes.
attr() obtiene información almacenada directamente en un atributo del elemento HTML.
<div data-texto="Hola"></div>
div::after {
content: attr(data-texto);
}
Una variable CSS, por el contrario, almacena información dentro de las propias reglas CSS.
:root {
--texto: "Hola";
}
div::after {
content: var(--texto);
}
Utiliza attr() cuando la información dependa del contenido o atributos de cada elemento y utiliza variables CSS cuando quieras reutilizar valores relacionados con el diseño o la configuración visual.
Ventajas de utilizar attr() dentro de content
Una de las principales ventajas es que puedes evitar duplicar determinados datos entre HTML y CSS, manteniendo la información en un único atributo.
También puedes reutilizar una misma regla CSS para decenas de elementos cuyos valores cambien individualmente mediante atributos data-*.
Además, la combinación resulta muy cómoda para crear etiquetas, indicadores, referencias, información auxiliar y elementos decorativos sin introducir nodos HTML adicionales.
Sin embargo, no deberías utilizar contenido generado por CSS como sustituto de información esencial que deba ser accesible, indexable o comprensible incluso cuando los estilos no se carguen correctamente.
Errores habituales al utilizar attr() en CSS
Un error bastante frecuente consiste en olvidar utilizar ::before o ::after cuando quieres generar contenido visual.
.elemento {
content: attr(data-texto);
}
Para los casos habituales deberías escribirlo de esta manera.
.elemento::after {
content: attr(data-texto);
}
Otro error consiste en escribir dentro de attr() un atributo que no existe en el elemento HTML, provocando que no aparezca el contenido esperado.
También debes evitar depender exclusivamente de content para proporcionar datos esenciales para comprender o utilizar correctamente una página web.
Cuándo utilizar attr() dentro de content
Puedes recurrir a esta técnica cuando necesites mostrar información complementaria procedente directamente de los atributos HTML.
Resulta especialmente práctica para tooltips sencillos, etiquetas automáticas, enlaces impresos, indicadores visuales y pequeñas anotaciones.
Si estás desarrollando una interfaz compleja donde el contenido cambia constantemente, probablemente será más conveniente utilizar JavaScript o generar directamente el contenido dentro del HTML.
Para elementos puramente visuales o información secundaria, en cambio, attr() junto con content puede ofrecerte una solución limpia, ligera y extremadamente sencilla. 🚀
Conclusión
Aprender cómo utilizar attr() dentro de content en CSS te permite aprovechar información que ya existe dentro de los atributos HTML para generar contenido visual automáticamente.
La estructura fundamental es tan sencilla como utilizar content: attr(nombre-atributo) dentro de un pseudoelemento ::before o ::after.
A partir de ahí puedes combinar atributos con textos, crear etiquetas, mostrar URLs, construir pequeños tooltips o utilizar atributos personalizados data-* para adaptar el contenido de cada elemento.
Como ocurre con muchas técnicas de CSS, la clave está en utilizarla donde realmente simplifique tu código y evitar depender de ella para contenido esencial o funcionalidades críticas de la página.
