When styling links with CSS, using something like
border-bottom: 1px solid #f00 instead of
text-decoration: underline means more control over spacing, style (solid, dashed, dotted) and color. You might even use a background image for a fancy graphic underline.
text-decoration, linked images won’t get an underline unless there’s text in the same link. But with
border-bottom, they always get the border.
Since the border is on the
a element, not the image, you have to somehow find the
a elements based on their descendants. To my knowledge there is no CSS-only solution for that in modern browsers. Please let me know if I’m wrong.
The solution is simple with jQuery:
When the DOM becomes available, all links containing images get the
image class. You can then easily style them:
See it in action on my girlfriend’s new blog.