Destacando diferentes tipos de links

Uma coisa que sempre me deixava irritado era a dificuldade de saber se um link, em uma página, era externo ou interno. Links externo, geralmente, são abertos em uma nova janela, mas isso não é uma boa idéia, pois polui a área de trabalho do visitante.
Uma solução para isso é você estilizar os links externo de seu site, colocando uma imagem ao lado do link com significado.
Você pode fazer criando uma classe para cada link externo:

.externo {
background: url(images/externalLink.gif) no-repeat right top;
}

Muito fácil, mas não é a maneira mais inteligente de se fazer isso, visto que terá que colocar a classe em cada link externo que produzir dentro do seu site ou blog.
Mostrarei uma técnica avançada de atribuição com seletor da CSS3, que já são suportada pelo Firefox e navegadores compatíveis com os padrões.

a[href^=”http:”] {--quaisquer links que começarem com o texto http: serão afetados
background: url(images/externalLink.gif) no-repeat right top;
padding-right: 15px;
}

Isso vai destacar todos os links externos de seu site, colocando uma imagem do lado direito (right) superior (top) com espaço do lado direito (padding-right) de 15px.
Porém, todos seus links serão afetados. Se você referência sua própria página, também receberá a estilização. Para resolver isso crie outra propriedade.

a[href^=”http://suapagina.com.br”], [href^=”http://www.suapagina.com.br”] { --suas paginas serão afetadas para ficarem sem estilização
Background-image: none;
padding-right: 0;
}

Aqui removemos a imagem de link externo e redefinimos a margem direita do link.
Simples né?

Subscreva o CSS-Desvandado completo!
Subscreva CSS - Desvendado por Email