Eu tenho uma regra CSS como esta:

a:hover { background-color: #fff; }

Mas isso resulta em uma lacuna de aparência ruim na parte inferior dos links de imagem e, o que é ainda pior, se eu tiver imagens transparentes, a cor de fundo do link pode ser vista através da imagem.

Eu já deparei com esse problema muitas vezes antes, mas sempre o resolvia usando a abordagem rápida e suja de atribuir uma classe aos links de imagem:

a.imagelink:hover { background-color: transparent; }

Hoje eu estava procurando uma solução mais elegante para esse problema quando me deparei comesta.

Basicamente, o que sugere é usardisplay: block, e isso realmente resolve o problema de imagens não transparentes. No entanto, isso resulta em outro problema: agora o link é tão largo quanto o parágrafo, embora a imagem não seja.

Existe uma boa maneira de resolver esse problema ou preciso usar a abordagem suja novamente?

Obrigado,