Cuando tienes una página web con numerosos enlaces, puede resultarte muy útil diferenciar visualmente los enlaces externos de aquellos que llevan a otras páginas de tu propio sitio.
CSS permite hacerlo sin recurrir a JavaScript, utilizando principalmente selectores de atributos, combinaciones de selectores y algunas funciones modernas que ofrecen un nivel de precisión sorprendente.
En este tutorial descubrirás cómo seleccionar enlaces externos únicamente con CSS, cómo excluir determinados enlaces y cómo añadir iconos o estilos especiales de manera automática. 🔗
¿Qué es un enlace externo?
Un enlace externo es cualquier enlace que dirige al usuario hacia un dominio diferente del sitio web que está visitando.
Por ejemplo, si tu página se encuentra en midominio.com y enlazas hacia Mozilla Developer Network, ese enlace puede considerarse externo porque conduce hacia otro dominio.
Por el contrario, enlaces como /contacto/, /blog/ o https://midominio.com/servicios/ serían normalmente enlaces internos.
Identificar ambos tipos mediante CSS resulta especialmente interesante cuando quieres añadir automáticamente un icono de enlace externo, cambiar colores o aplicar algún pequeño efecto visual.
Cómo seleccionar enlaces con CSS
CSS dispone de los llamados selectores de atributos, que permiten seleccionar elementos HTML dependiendo del contenido de alguno de sus atributos.
Un enlace HTML convencional puede tener esta estructura:
<a href="https://ejemplo.com">Visitar página</a>
En este caso puedes seleccionar todos los enlaces que tengan un atributo href mediante el siguiente código:
a[href] {
color: blue;
}
Este selector afectaría prácticamente a todos los enlaces, independientemente de si son internos o externos.
Para distinguirlos tendremos que analizar el contenido del atributo href.
Seleccionar enlaces externos que empiezan por HTTP
Una de las soluciones más sencillas consiste en utilizar el selector CSS ^=, que permite seleccionar atributos cuyo contenido empieza por un determinado valor.
Puedes utilizar este código:
a[href^="http"] {
color: red;
}
El selector anterior identifica cualquier enlace cuyo atributo href comience por http, por lo que normalmente seleccionará URLs absolutas.
También puedes utilizar una versión algo más específica:
a[href^="https://"] {
color: red;
}
Esto seleccionará únicamente enlaces cuya dirección comience exactamente por https://.
Puedes consultar con mayor detalle el funcionamiento de estos selectores en la documentación sobre selectores de atributos de CSS.
El problema de seleccionar únicamente enlaces que empiezan por HTTP
Aunque la solución anterior resulta sencilla, tiene una limitación importante.
Si utilizas URLs absolutas para tus enlaces internos, CSS también las seleccionará.
Por ejemplo:
<a href="https://midominio.com/contacto/">Contacto</a>
Aunque este enlace empieza por https://, continúa siendo un enlace interno porque apunta hacia tu propio dominio.
Por ese motivo necesitas combinar varios selectores para conseguir una selección mucho más precisa.
Cómo excluir tu propio dominio con CSS
Puedes combinar los selectores de atributos con la pseudoclase :not() para excluir aquellos enlaces que pertenezcan a tu propia web.
Supongamos que tu dominio es midominio.com.
Puedes utilizar este código:
a[href^="http"]:not([href*="midominio.com"]) {
color: red;
}
El selector [href*="midominio.com"] identifica cualquier enlace cuyo atributo href contenga midominio.com, mientras que :not() hace exactamente lo contrario y lo excluye.
Por tanto, el navegador aplicará la regla únicamente a los enlaces que comiencen por HTTP y que no contengan tu dominio.
Esta técnica suele ser suficiente para la mayoría de páginas web convencionales. ✅
Cómo añadir un icono automáticamente a los enlaces externos
Una aplicación bastante habitual consiste en añadir un pequeño símbolo junto a los enlaces externos para indicar al usuario que abandonará tu sitio web.
Puedes hacerlo únicamente con CSS mediante el pseudoelemento ::after.
Utiliza este ejemplo:
a[href^="http"]:not([href*="midominio.com"])::after {
content: " ↗";
}
Ahora todos los enlaces externos mostrarán automáticamente una pequeña flecha ascendente después del texto.
No tendrás que modificar individualmente cada enlace ni añadir elementos HTML adicionales. 🚀
Añadir un icono usando caracteres Unicode
Además de una flecha convencional, puedes utilizar diferentes caracteres Unicode dentro de la propiedad content.
Por ejemplo:
a[href^="http"]:not([href*="midominio.com"])::after {
content: " 🔗";
}
También puedes utilizar símbolos como ↗, ⧉ o cualquier otro carácter compatible con la tipografía utilizada en tu web.
La documentación de CSS Generated Content puede ayudarte a conocer mejor las posibilidades de ::before, ::after y content.
Cómo dar estilo únicamente a los enlaces externos
No estás limitado a añadir un icono, ya que puedes modificar prácticamente cualquier propiedad visual del enlace seleccionado.
Por ejemplo:
a[href^="http"]:not([href*="midominio.com"]) {
text-decoration: underline;
font-weight: 600;
}
Con este código los enlaces externos aparecerán subrayados y con mayor grosor de fuente.
También podrías modificar su color, añadir un borde inferior o cambiar ligeramente su apariencia cuando el usuario pase el cursor sobre ellos.
a[href^="http"]:not([href*="midominio.com"]):hover {
opacity: 0.7;
}
Este pequeño efecto permite comunicar visualmente que el elemento es interactivo sin resultar demasiado intrusivo.
Cómo excluir determinados enlaces externos
En ocasiones quizá quieras seleccionar enlaces externos pero excluir determinados dominios.
Por ejemplo, podrías querer mantener sin cambios los enlaces hacia YouTube.
Puedes añadir otra pseudoclase :not():
a[href^="http"]
:not([href*="midominio.com"])
:not([href*="youtube.com"]) {
font-weight: bold;
}
CSS permite encadenar varios :not(), por lo que puedes excluir tantos dominios como necesites.
También puedes crear una clase específica para enlaces que no quieras modificar.
<a href="https://ejemplo.com" class="sin-icono">
Página externa
</a>
Después puedes excluirla así:
a[href^="http"]
:not([href*="midominio.com"])
:not(.sin-icono)::after {
content: " ↗";
}
Esta solución te proporciona un control manual adicional cuando existen excepciones dentro de tu diseño.
Cómo seleccionar enlaces externos paso a paso
Si quieres implementar esta técnica en tu página, puedes seguir estos pasos:
- 🔎 Identifica el dominio principal de tu página web.
- 🎨 Abre la sección donde puedas añadir CSS personalizado en tu CMS, tema o constructor visual.
- 🧩 Añade un selector basado en
a[href^="http"]para identificar las URLs absolutas. - 🚫 Utiliza
:not([href*="tudominio.com"])para excluir tu propio dominio. - 🔗 Añade
::aftersi quieres mostrar automáticamente un icono junto al enlace. - 🧪 Comprueba diferentes páginas de tu web para asegurarte de que los enlaces internos no reciben accidentalmente el estilo.
- 📱 Revisa también el resultado desde dispositivos móviles para verificar que el icono o decoración no perjudique la lectura.
Tabla resumen de selectores para enlaces externos
| Objetivo | Selector CSS | Resultado |
|---|---|---|
Seleccionar enlaces con href | a[href] | Selecciona todos los enlaces con destino |
| Seleccionar URLs HTTP | a[href^="http"] | Selecciona URLs absolutas |
| Seleccionar URLs HTTPS | a[href^="https://"] | Selecciona únicamente HTTPS |
| Buscar un dominio | a[href*="dominio.com"] | Selecciona enlaces que contienen ese dominio |
| Excluir tu dominio | :not([href*="dominio.com"]) | Evita seleccionar enlaces internos absolutos |
| Añadir contenido | ::after | Añade contenido después del enlace |
| Excluir una clase | :not(.clase) | Ignora determinados enlaces |
Una alternativa moderna utilizando :is() y :not()
Los navegadores modernos permiten crear selectores más expresivos utilizando pseudoclases como :is() y :not().
Por ejemplo:
a:is([href^="http://"], [href^="https://"])
:not([href*="midominio.com"]) {
text-decoration: underline;
}
Este selector identifica enlaces que comiencen tanto por HTTP como por HTTPS y posteriormente excluye aquellos que pertenezcan a tu dominio.
Puedes conocer el soporte y funcionamiento de estas pseudoclases en la documentación de la pseudoclase :is() de CSS.
¿Es posible detectar cualquier enlace externo exclusivamente con CSS?
Aquí aparece una pequeña limitación que debes tener presente, ya que CSS no conoce realmente el concepto de dominio externo del mismo modo que JavaScript puede comparar location.hostname con el dominio de un enlace.
CSS simplemente analiza cadenas de texto dentro del atributo href.
Por este motivo debes indicarle explícitamente qué dominio debe excluir mediante [href*="midominio.com"].
En páginas convencionales esta solución resulta suficientemente práctica, ligera y fácil de mantener.
Si administras aplicaciones complejas con numerosos subdominios, redirecciones o estructuras dinámicas, probablemente necesites complementar CSS con JavaScript o lógica del servidor.
CSS recomendado para seleccionar enlaces externos
Para una web convencional puedes partir de este fragmento:
a[href^="http"]:not([href*="midominio.com"])::after {
content: " ↗";
margin-left: 0.25em;
font-size: 0.85em;
}
Solo necesitas sustituir midominio.com por tu dominio real.
El resultado es una solución extremadamente ligera que añade automáticamente un indicador visual a prácticamente todos tus enlaces externos. ⚡
Conclusión
Seleccionar enlaces externos únicamente con CSS es posible combinando selectores de atributos como [href^="http"] y [href*="dominio"] con la pseudoclase :not().
Esta técnica te permite diferenciar enlaces externos, añadir iconos, cambiar estilos y establecer excepciones sin modificar manualmente cada enlace.
Además, al tratarse únicamente de CSS, no necesitas cargar scripts adicionales y puedes mantener una implementación extremadamente sencilla.
Con unas pocas líneas de código conseguirás que el navegador identifique visualmente tus enlaces externos de forma automática, haciendo que tu contenido resulte más claro y coherente para el usuario. 🔗
