How do I remove the underline from an image wrapped in an anchor?

Question

Anyhow, I have a problem. A tiny problem I suppose, but one that's bugging me. I updated the CSS for my anchors on my blog, so that they were underlined with a border. Problem now is all my images that were linked are underlined, and it looks wrong.

So I assume the only way to fix this is to apply a CSS class to all the images inside anchors so that they have border: none;. I don't know how to do this though. Anyone willing to explain if this is even possible? Thanks in advance.

Answer 1

Underlining is controlled by the text-decoration CSS property. So if you want to turn that off:

a { text-decoration: none; }

Answer 2

Try this:

<style type="text/css">
a img { text-decoration: none } // Images within 
</style>

However, this is awfully general and if your anchors have padding, it won't work entirely, there may be residue underlining to the right and left of your image.

It would be better to turn underlining for links off in general, define a CSS class for your anchors, and turn underlining on in that class:

a { text-decoration: none }
a.my_anchor_class { text-decoration: underline }

Answer 3

In jQuery, you could use the has selector to add a class to all links that have an image inside them:

$('a:has(img)').addClass('image-link');

Then remove the border from those links in your CSS:

a.image-link {
    border-bottom-style: none;
}

It would only work when JavaScript’s enabled though.