My HTML: <a href="#"><img src="foo.png" /></a>

Is it possible to remove the underline on all of the <a>s throughout the document with one rule?

6 answers


I'm not sure this is what you're looking for because I'm not absolutely certain of your question.

If your regular link style gets the underline from text-decoration:underline, and NOT from a border style, you can remove this from your images like so:

a img { border:0; }

If this doesn't solve your problem, show us your CSS, or even a screenshot.

Answered almost 8 years ago by jenny ham
  • My link style gets the underline like this: `border-bottom: 1px dotted #000;` My question is really: is there a CSS selector that can modify all elements with another specific element inside of them? (i.e. all `<a>`s with an `<img>` inside?) Ishaan Gulrajani almost 8 years ago
  • I think jenny ham got it perfect. a img { border:0;} will modify all a tags with img tags inside them. +1 Abinadi Ayerdis almost 8 years ago
  • it will modify all image elements inside an <a> element. Tony Crockford almost 8 years ago
  • So, there isn't any way to accomplish this if my regular link style DOES get the underline from a border style? Bowen over 7 years ago

You could cheat, and move images inside links down to cover the border?


a img {position: relative; bottom: -4px; left:0;}

that seems to work in my tests

Answered almost 8 years ago by Tony Crockford

No. You can't do a condition where it checks the source of the a and then does something because of that. You may be able to do that with a CSS3 selector but that's not widely supported at this time. You can definitely do it with Javascript but honestly the best way to do this would be to add a class to the link unless it's going to be the most widely used style, in that case just add a class for all links that aren't styled this way.

Answered almost 8 years ago by DFischer
  • Yes, I was looking for something along the lines of a CSS3 selector... Ishaan Gulrajani almost 8 years ago

With jQuery, you can do this:

$(document).ready(function() {
    $('a img').parent('a').css('border','0');

Or set another propery like "text-decoration" instead.

Answered almost 8 years ago by Kip Holcomb

I run into this problem all the time. I'm not sure if I remember right, but I think

a img { display:block; }

Fixes the problem. I don't know if that validates though, because that puts a block element inside an inline element.

If the linked images are elements like your logo header, navigation, etc., I would recommend that you use "CSS image-replacement" to do the links like this:

<a class="img-link">This is an image</a>

a.img-link { display:block; width:100px; height:50px; background:url(./img/img-link.gif) no-repeat; text-indent:-9999px; overflow:hidden; }

Otherwise, I just try to more specifically target the links that I want to have a border-style on:

div#primary-content a { border-bottom:1px solid #000; }

If that still doesn't work, I would use a class for links that contain images:

a.img { border:0 none; }
Answered almost 8 years ago by Kevin Crawford

According to my understanding of your question, you want to remove the text-decoration of text links and the border from image links. You can do so thusly:

a {text-decoration:none;} a img {border:none;}

Good luck!

Answered almost 8 years ago by elitesouth