Getting rid of border-bottom on linked images with jQuery

Written . Tagged CSS, JavaScript, jQuery.

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.

With 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:

$(function() { $('a:has(img)').addClass('image'); });

When the DOM becomes available, all links containing images get the image class. You can then easily style them:

a { border-bottom: 1px solid #f00; }
a.image { border-bottom: none; }

See it in action on my girlfriend’s new blog.

Since the page will still work fine without JavaScript, only look a little less attractive, I think this solution is quite acceptable, though a CSS-only solution would be better still.