Si tienes una página web con documentos descargables, probablemente te interese diferenciar visualmente los enlaces que apuntan a archivos PDF del resto de enlaces de tu sitio.
CSS permite hacerlo de una forma sorprendentemente sencilla gracias a los selectores de atributos, sin necesidad de añadir clases manualmente a cada enlace.
Con apenas una línea de CSS puedes seleccionar automáticamente cualquier enlace cuyo atributo href termine en .pdf y aplicarle el diseño que quieras.
🔎 Esta técnica resulta especialmente útil en páginas de documentación, bibliotecas digitales, webs corporativas, universidades, administraciones públicas o cualquier sitio en el que publiques documentos PDF descargables.
Seleccionar enlaces PDF con CSS
La forma más sencilla de seleccionar enlaces que terminan en .pdf consiste en utilizar el selector de atributo $= de CSS.
El código básico sería el siguiente:
a[href$=".pdf"] {
color: red;
}
Con esta regla estás diciendo al navegador que seleccione todos los elementos <a> cuyo atributo href termine exactamente con .pdf.
Por ejemplo, este enlace quedaría seleccionado:
<a href="documento.pdf">Descargar documento</a>
También funcionaría con una dirección más larga:
<a href="/documentos/manual-de-usuario.pdf">Descargar manual</a>
En ambos casos, el valor del atributo href termina en .pdf, por lo que la regla CSS se aplicará automáticamente.
¿Qué significa href$=».pdf»?
Para entender este selector conviene separar sus diferentes componentes.
El elemento a indica que quieres seleccionar enlaces HTML.
La expresión [href] permite seleccionar elementos que contienen el atributo href.
El operador $= significa literalmente «termina en».
Finalmente, .pdf es la cadena de caracteres que CSS buscará al final del atributo.
Por tanto:
a[href$=".pdf"]
puede interpretarse como «selecciona todos los enlaces cuyo href termine en .pdf».
📚 Puedes consultar más detalles sobre este tipo de reglas en la documentación sobre selectores de atributos de MDN.
Cómo cambiar el aspecto de los enlaces PDF
Una vez que has seleccionado los enlaces PDF puedes modificar prácticamente cualquier propiedad CSS.
Por ejemplo, puedes cambiar el color, el grosor de la fuente o la decoración del enlace:
a[href$=".pdf"] {
color: #c62828;
font-weight: 600;
text-decoration: underline;
}
De esta forma, todos los enlaces PDF tendrán automáticamente un aspecto diferente al resto de enlaces.
🎨 Esto puede ayudarte a que el usuario comprenda rápidamente que al pulsar ese enlace accederá a un documento PDF.
Añadir un icono a los enlaces PDF con CSS
Una aplicación especialmente interesante consiste en añadir automáticamente un icono junto a todos los enlaces PDF.
Puedes hacerlo utilizando el pseudoelemento ::after.
a[href$=".pdf"]::after {
content: " 📄";
}
Ahora cualquier enlace que termine en .pdf mostrará el icono 📄 después del texto.
Por ejemplo, si tienes:
<a href="catalogo.pdf">Descargar catálogo</a>
el navegador mostrará algo parecido a:
Descargar catálogo 📄
La principal ventaja es que no tienes que modificar el HTML de cada enlace, ya que CSS añade automáticamente el indicador visual.
Añadir la palabra PDF después del enlace
Otra posibilidad consiste en indicar explícitamente el formato del archivo.
Puedes utilizar este código:
a[href$=".pdf"]::after {
content: " [PDF]";
font-size: 0.85em;
}
El resultado permitirá que el visitante identifique inmediatamente que está delante de un archivo PDF descargable.
Esta solución puede ser especialmente útil en páginas donde aparecen diferentes tipos de documentos.
Cómo añadir un icono PDF mediante una imagen
Si quieres conseguir un diseño más elaborado, puedes utilizar una imagen como icono mediante CSS.
Un ejemplo podría ser:
a[href$=".pdf"] {
padding-right: 22px;
background-image: url("icono-pdf.svg");
background-repeat: no-repeat;
background-position: right center;
background-size: 16px;
}
En este caso debes sustituir icono-pdf.svg por la dirección correspondiente al icono que quieras utilizar.
Esta técnica permite mantener limpio el HTML y aplicar automáticamente el mismo estilo a todos los documentos.
Seleccionar PDF aunque la extensión esté en mayúsculas
Hay un pequeño detalle que puede causarte problemas si algunos archivos utilizan extensiones en mayúsculas.
Por ejemplo:
<a href="documento.PDF">Documento</a>
Dependiendo del selector utilizado, este enlace podría no coincidir con una regla pensada exclusivamente para .pdf.
Puedes utilizar un selector insensible a mayúsculas y minúsculas:
a[href$=".pdf" i] {
color: red;
}
La letra i indica que la comparación debe realizarse sin distinguir entre mayúsculas y minúsculas.
De esta manera podrán coincidir extensiones como .pdf, .PDF, .Pdf o .pDf.
¿Qué ocurre si el enlace PDF contiene parámetros?
Uno de los casos que debes tener en cuenta aparece cuando la URL contiene parámetros después de la extensión PDF.
Por ejemplo:
<a href="documento.pdf?version=2">Descargar documento</a>
Este enlace técnicamente no termina en .pdf, sino en version=2.
Por ese motivo, el selector:
a[href$=".pdf"]
no lo seleccionaría.
Una posible alternativa consiste en combinar varios selectores:
a[href$=".pdf"],
a[href*=".pdf?"] {
color: red;
}
El operador *= significa «contiene», por lo que la segunda regla localizará enlaces que contengan .pdf? dentro de su atributo href.
Puedes ampliar esta idea dependiendo de la estructura de las URLs que utilice tu página.
Cómo aplicar estos estilos paso a paso
Puedes implementar esta técnica en prácticamente cualquier página web siguiendo estos pasos:
- 🔍 Localiza el archivo CSS de tu web o el apartado desde el que puedas añadir CSS personalizado.
- ✏️ Añade el selector
a[href$=".pdf"]para identificar automáticamente los enlaces que terminan en.pdf. - 🎨 Introduce dentro del selector las propiedades CSS que quieras aplicar.
- 📄 Utiliza
::aftersi quieres añadir automáticamente un icono o una indicación como[PDF]. - 🔠 Añade la bandera
isi quieres evitar problemas relacionados con mayúsculas y minúsculas. - 🧪 Guarda los cambios y comprueba diferentes enlaces PDF para asegurarte de que el estilo se aplica correctamente.
- 📱 Revisa también el resultado desde dispositivos móviles para comprobar que el icono, los márgenes y el texto mantienen una buena legibilidad.
Ejemplo completo de CSS para enlaces PDF
Si quieres una solución más completa, puedes combinar varias propiedades en una misma regla.
a[href$=".pdf" i] {
font-weight: 600;
text-decoration: underline;
}
a[href$=".pdf" i]::after {
content: " 📄 PDF";
margin-left: 5px;
font-size: 0.8em;
}
Con este código consigues que todos los enlaces PDF tengan un estilo reconocible y que además aparezca una indicación después del texto.
Puedes modificar cada propiedad hasta adaptar el resultado completamente al diseño de tu web.
Tabla resumen de selectores CSS para PDF
| Selector CSS | Función | Ejemplo que selecciona |
|---|---|---|
a[href$=".pdf"] | Selecciona enlaces que terminan en .pdf | manual.pdf |
a[href$=".pdf" i] | Selecciona .pdf sin distinguir mayúsculas y minúsculas | manual.PDF |
a[href*=".pdf"] | Selecciona enlaces que contienen .pdf | manual.pdf?download=1 |
a[href*=".pdf?"] | Selecciona PDF que contienen parámetros URL | manual.pdf?v=2 |
a[href$=".pdf"]::after | Permite añadir contenido después del enlace | Manual 📄 |
Otros selectores de atributos que te pueden resultar útiles
El operador $= forma parte de un conjunto mucho más amplio de selectores de atributos CSS.
Por ejemplo, puedes utilizar ^= para seleccionar atributos que empiezan por una determinada cadena.
a[href^="https://"] {
font-weight: bold;
}
También puedes utilizar *= para seleccionar atributos que contienen una determinada cadena.
a[href*="youtube.com"] {
text-decoration: underline;
}
Y puedes utilizar simplemente [atributo] para comprobar que un elemento contiene un determinado atributo, independientemente de su valor.
a[target] {
font-weight: bold;
}
Si quieres profundizar en el funcionamiento de estos mecanismos puedes consultar la especificación de CSS Selectors Level 4 del W3C.
Seleccionar también otros tipos de documentos
La misma técnica que utilizas con PDF puede aplicarse a prácticamente cualquier extensión de archivo.
Por ejemplo, para documentos de Word:
a[href$=".docx"] {
font-weight: bold;
}
Para hojas de cálculo:
a[href$=".xlsx"] {
font-weight: bold;
}
Para archivos comprimidos:
a[href$=".zip"] {
font-weight: bold;
}
Incluso puedes combinar diferentes extensiones para aplicarles un estilo común.
a[href$=".pdf"],
a[href$=".docx"],
a[href$=".xlsx"] {
text-decoration: underline;
}
De esta manera puedes crear un sistema visual coherente para todos los archivos descargables de tu página web.
Ventajas de seleccionar enlaces PDF mediante CSS
Una de las principales ventajas de este método es que no necesitas añadir clases manualmente cada vez que publiques un nuevo documento.
También reduces la cantidad de código HTML necesario, ya que la identificación del tipo de archivo se realiza automáticamente mediante el propio valor del atributo href.
Otra ventaja importante es que puedes modificar el diseño de cientos de enlaces desde una única regla CSS.
Además, diferenciar visualmente los documentos puede mejorar la experiencia de navegación porque el usuario sabe antes de hacer clic que está accediendo a un archivo PDF.
🚀 Si administras una web con muchos documentos, esta pequeña técnica puede ahorrarte bastante trabajo y ayudarte a mantener un diseño mucho más consistente.
Conclusión
Seleccionar enlaces que terminan en .pdf con CSS es muy sencillo gracias al selector de atributos a[href$=".pdf"].
Con esta regla puedes identificar automáticamente tus documentos PDF y aplicarles colores, iconos, textos adicionales, márgenes o cualquier otra propiedad CSS.
Si además utilizas a[href$=".pdf" i], evitarás problemas con archivos cuya extensión aparezca escrita en mayúsculas.
Y cuando tus URLs incluyan parámetros después de .pdf, puedes combinar $= con selectores como *= para cubrir situaciones más complejas.
📄 Con unas pocas líneas de CSS puedes conseguir que todos los documentos PDF de tu página sean más fáciles de identificar, más consistentes y visualmente más claros para tus visitantes.
