El efecto que queremos lograr es agregar un pequeño icono a todos los enlaces que apunten a este sitio para decirle al usuario que hacer clic en este enlace hará que salga de este sitio, que es un enlace externo. Por supuesto, esto se puede lograr a través de JavaScript más complejo, pero ahora podemos implementar esta función a través de selectores de propiedades CSS 3.
a [href^= "http:"] {
Fondo: URL (Images/ExterNALLINK.GIF) No-repetir la parte superior derecha;
Right de relleno: 10px;
}
El código anterior significa: todos los enlaces que comienzan con HTTP: tendrán un pequeño icono de flecha, lo que le indica al usuario que sea un enlace externo, y el usuario dejará este sitio haciendo clic. 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 es para enlaces a este sitio que usan direcciones relativas. ¿Qué pasa si el enlace a este sitio también comienza con HTTP:, o si usa direcciones absolutas y relativas? Podemos usar el siguiente código:
a [href^= "http:"] {
Fondo: URL (Images/ExterNALLINK.GIF) No-repetir la parte superior derecha;
Right de relleno: 10px;
}
A [href*= "www.dudo.org"] {
Antecedentes: ninguno;
relleno: 0;
}
Las dos reglas anteriores son: todos los íconos que comienzan con http: se agregan con enlaces externos, seguidos de http://www.dudo.org/, y no se usan, por lo que son naturalmente relativos a la dirección porque no lo hacen Comience con HTTP.
Fuente: http://www.dudo.org/article/cssjs/use_new_tech_of_css.htm