Written November 4, 2008. Tagged JavaScript, CSS, 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.