El efecto que queremos lograr es agregar un pequeño ícono a todos los enlaces que no apuntan a este sitio para indicar a los usuarios que al hacer clic en este enlace saldrán de este sitio. Por supuesto, esto se puede lograr mediante JavaScript más complejo, pero ahora podemos lograr esta función mediante selectores de atributos CSS 3.
a[href^=”http:”] {
fondo:url(images/externalLink.gif) no repetir arriba a la derecha;
relleno-derecha: 10px;
}
El significado del código anterior es: Todos los enlaces que comienzan con http: se agregarán con un pequeño icono de flecha para recordarle al usuario que se trata de un enlace externo y el usuario abandonará el sitio cuando haga clic en él. Se puede decir que esta función es muy fácil de usar y destaca la facilidad de uso del diseño web.
Por supuesto, esto se debe a que todos los enlaces que apuntan a este sitio utilizan direcciones relativas. ¿Qué pasa si el enlace a este sitio también comienza con http: o utiliza direcciones absolutas y relativas? Podemos usar el siguiente código:
a[href^=”http:”] {
fondo:url(images/externalLink.gif) no repetir arriba a la derecha;
relleno-derecha: 10px;
}
a [href*=”www.dudo.org”] {
antecedentes: ninguno;
relleno: 0;
}
Las dos reglas anteriores son: todas las que comienzan con http: se agregan con el ícono de enlace externo, y las que comienzan con http://www.dudo.org/ no se usan. Las direcciones relativas naturales no comienzan con http. El icono de flecha no aparecerá.
Fuente del artículo: http://www.dudo.org/article/CSSJS/use_new_tech_of_CSS.htm