Como inserir um ícone no link sem usar uma classe específica

CSS possui regras que possibilitam personalizar um determinado elemento através de seus atributos, no caso de links podemos verificar o atributo “target” para verificar se vai abrir em uma nova janela ou até mesmo o “href”, esse recurso pode ser aplicado a qualquer elemento como imagens, elementos de formulário e o que mais você imaginar. Aproveite este recurso para personalizar elementos diferenciando apenas por seus atributos.

Seletor de Atributos

Quando constrói uma regra CSS pode-se usar o seletor de atributos ele funcional colocando o atributo dentro de colchetes [], podendo usar qualquer atributo do elemento e até pseudo-classes para personalizar ainda mais, por exemplo, você quer que todos os links que abram uma nova janela estejam sinalizados por uma imagem, como Wikipédia faz

Basta criar uma regra assim: a[target=”_blank”]:after{}, então podemos inserir um texto ou imagem com “content”, em nosso exemplo usaremos uma imagem

Então o código fica assim:

a[target="_blank"]:after{
	content: url("nova-janela.gif");
}

O resultado fica assim:

Link

Do mesmo jeito podemos inserir uma imagem antes do link mudando de after para before:

a[target="_blank"]:before{
	content: url("imagem.gif");
}

Desta forma poderíamos criar um menu onde colocaremos uma imagem com o texto embaixo dela. Para isso veja um código HTML simples para um menu:

<ul class="menu">
	<li><a href="home.html"></a></li>
	<li><a href="contato.html"></a></li>
	<li><a href="sobre.html"></a></li>
</ul>

Note que não criei nenhuma classe especial para cada item do menu, ao invés disso vou me na url e para ficar mais dinâmico vou suar vou usar um detalhe para pegar apenas o final da url

Primeiro vou usar uma regra geral para todos os itens do menu, assim se tiver algum link sem imagem ela vai mostrar uma imagem padrão

Fica assim

.menu li a:before {
	content: url("imagem.gif");
	display: block;
	text-align: center;
}

Com isso todos os links do menu vão apresentar uma imagem padrão

Agora para cada link criaremos uma regra muito específica que vai mostrar a imagem certa ao invés da imagem personalizada, então a regra para cada botão fica assim:

.menu li a[href$="home.html"]:before {
	content: url("home.gif");
}
.menu li a[href$="contato.html"]:before {
	content: url("contato.gif");
}
.menu li a[href$="sobre.html"]:before {
	content: url("sobre.gif");
}

Repare no sinal de cifrão na regra antes do sinal de igual ($=) ela diz ao navegador para pegar o elemento com atributo href que termine com tal texto, desta forma eu consigo pegar cada link específico de acordo com o final da url e não pela url completa

O resultado fica assim: