O efeito que queremos alcançar é adicionar um pequeno ícone a todos os links que apontam para um site que não seja este, para informar aos usuários que clicar neste link o levará para fora deste site. Claro, isso pode ser conseguido através de JavaScript mais complexo, mas agora podemos alcançar esta função através de seletores de atributos CSS 3.
uma[href^=”http:”] {
background:url(images/externalLink.gif) sem repetição no canto superior direito;
preenchimento à direita: 10px;
}
O significado do código acima é: Todos os links começando com http: serão adicionados com um pequeno ícone de seta para lembrar ao usuário que este é um link externo, e o usuário sairá do site quando clicado. Pode-se dizer que esta função é muito fácil de usar e destaca a facilidade de uso do web design.
Claro, isso ocorre porque todos os links que apontam para este site usam endereços relativos. E se o link para este site também começar com http: ou usar endereços absolutos e relativos? Podemos usar o seguinte código:
a[href^=”http:”] {
background:url(images/externalLink.gif) sem repetição no canto superior direito;
preenchimento à direita: 10px;
}
a [href*=”www.dudo.org”] {
histórico: nenhum;
preenchimento:0;
}
As duas regras acima são: todos aqueles que começam com http: são adicionados com o ícone do link externo, e aqueles que começam com http://www.dudo.org/ não são usados. Endereços relativos naturais não começam com http. o ícone de seta não aparecerá.
Fonte do artigo: http://www.dudo.org/article/CSSJS/use_new_tech_of_CSS.htm