Que tal avisar para o seu leitor (que não sabe que a URL do link aparece ali no canto inferior esquerdo quando você passa o mouse por cima) que o seu link leva para um arquivo .pdf, ou que o link serve para ele enviar um e-mail, antes mesmo dele passar o mouse por cima do texto do link ou clicar?

Fazia tempos que não dava alguma dica de CSS aqui no blog, então resolvi tirar um tempinho para escrever esta que usei no blog inovaTIvidade (jabá); onde você pode colocar ícones após links de arquivos do Powerpoint, do Excel, do Word, PDFs etc.

Exemplo:

Isso é algo bem fácil de se fazer via CSS, segue o código:

a[href$='.doc'] { padding:0 20px 0 0; background:transparent url(/imagens/icones/word.gif) no-repeat center right; }

Esse código faz com que todos os links que terminarem com .doc apareçam com o ícone do Microsoft Word na frente. Basta copiar e colar este código para cada extensão de arquivo que você desejar: .pdf, .ppt, .docx, etc.

Também é possível fazer o mesmo com os links para enviar e-mail através do código:

a[href^="mailto:"] { padding:0 20px 0 0; background:transparent url(/imagens/icones/email.gif) no-repeat center right; }

Vocês podem ver uma demonstração online do código no final deste post do inovaTIvidade.

Compartilhe!