Meu primeiro artigo foi falando de um assunto relacionado à esse, Link estilizado. Hoje vou mostrar um exemplo para os links de e-mails: <a href="mailto:cleowd[at]gmail[dot]com">. O resultado final será esse: Better Email Links.
Relembrando: "Seletores de Atributos"
O seletor de atributo "é uma declaração em um formato que 'casa' com todos os elementos que sigam aquele formato na árvore do documento." (Maujor). Exemplo:
h1 { color:#C00C00; }
Ou seja, esse estilo será aplicado para todos os headers <h1 />.
Podem ser especificados se tiverem algum tributo:
h1[att] { color:#C00C00; }
Onde att é um atributo qualquer (title, type, align etc). No link acima do Maujor, tem uma tabela bem explicativa. Vale a pena conferir.
O que diferencia os links de e-mail?
Os links de e-mail são diferenciados porque são os únicos que começam com a palavra "mailto:", e é com esse comando que o navegador vai enviar e-mails usando um progama específico do sistema operacional do computador, como o outlook que vem integrado no windows. Podemos então usar esse diferencial para aplicar um estilo específico somente para os links de e-mails:
a[href^="mailto"] { color: #C00C00; }
Complemento
Essa técnica pode ser usada para outras tags e atributos. Isso ajuda muito, pois podemos dar estilos aos elementos sem que precise ficar inventando nomes de classes. Os pseudo-elementos podem ajudar em um efeito ainda melhor:
a[href^="mailto"]:hover:after { content: " > " attr(title); }
O estilo vai aparecer quando o mouse passar por cima do link e adicionar o > depois dele. Junto com o caractere são colocados espaços para que os textos não fiquem colados.
Nada é perfeito
Infelizmente, esse estilo não é aceito por todos os navegadores. É, estou me referindo ao IE mesmo. Inclusive o 7. Não sei quanto ao 8, mas não interfere no estilo do link, só não vai aparecer nada. Existem algumas bibliotecas js que podem ajudar a resolver esse probleminha.
Fonte: CSS-Tricks
