How to remove underline from an image wrapped in an anchor?

Question

Anyway, I have a problem. I suppose a tiny problem, but one of those that bothers me. I updated the CSS for my anchors on my blog so that they are underlined with a frame. The problem now is that all of my images that were connected are underlined, and it looks wrong.

Therefore, I assume that the only way to fix this is to apply the CSS class to all the images inside the anchors so that they have border: none; . I do not know how to do that. Anyone who wants to explain is this possible? Thanks in advance.

Answer 1

Try the following:

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

However, this is terribly general, and if your anchors have padding, they will not work completely, there may be leftovers located to the right and left of your image.

It’s best to enable underline for links in general, define a CSS class for your anchors, and include in this class:

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

Answer 2

Try the following:

 a img { border:none; vertical-align:top; } 

It moves the underline up and down below the image.

Answer 3

The underline is controlled using the CSS text-decoration property. Therefore, if you want to disable this:

 a { text-decoration: none; } 

Answer 4

In jQuery, you can 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 these links in CSS:

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

It will only work when JavaScripts is enabled.