Esta questão já tem uma resposta aqui:

Como todas as pessoas de bom senso, eu odeio clicar em um link e descobrir tarde demais que isso leva a um arquivo PDF ou Microsoft Office prejudicial ao navegador. Pensei em tornar a vida um pouco mais fácil para as pessoas exibindo um pequeno ícone ao lado dos links que levam a esses arquivos. Com o IE8 finalmente apoiando o:after pseudo-elemento, eu pensei que a declaração CSS seria bastante simples:

a.file_pdf:after {
    content:url('/images/pdf.png');
    text-decoration: none;
    padding-left: 5px;
}

No IE8, isso funciona bem. No Firefox e Chrome, no entanto,text-decoration: none é ignorado e o sublinhado se estende de maneira pouco atraente na parte inferior do ícone. Existe uma maneira de corrigir isso sem "fazer batota" usando um extra<span> tag?