remove link underline from image only if the anchor tag contains an img

Question

<a href="#">
        <img width="103" height="100"  src="img source">
    </a>

for the above html code I am using the following css

a {
    border-bottom-style: dotted;
    border-bottom-width: 1px;
}

a img {
    border: 0 none;
}

Basically what I am trying to achieve here to underline the text links while keeping img links without any underline. however I guess by styling the text links I am also styling image links, I want any image in a link should not be underlined.

Can any one suggest work around for this?

score 10 · Answer 1 · edited May 23 '17 at 11:51

After a lot of Googling I finally found a neat trick that worked for me:

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

Why this works?

By default both anchors and images are inline elements and by applying vertical-align:top; to an image inside an anchor, we move the anchor to the top of the image. For some reason images have higher z-index than anchors.

Source: Remove Border from Image Links

By the way, it would work great with a parent selector like a < img ... unfortunately this isn't implemented yet, but is in the workings. Take a look here: https://stackoverflow.com/a/45530/114029

Simple and functional. Really helpful. Thank you. :) – bazaglia Jun 07 '15 at 21:51 — bazaglia, Jun 07 '15 at 21:51

Mr Lister · Accepted Answer · 2012-01-30T08:28:07.673

3

The underline is caused by the text decoration on the a. So just apply text-decoration:none to the a.

Edit: there is currently no CSS-only way to apply a style to "any a that has an img as its child". CSS does not have selectors for that. So you'll either have to make these as unique by giving them classes (or other attributes) and apply the CSS to those classes, or run some script that tests for imgs in as and gives those as the desired style.

edited Jan 30 '12 at 08:28

answered Jan 30 '12 at 07:46

Mr Lister

45,515
15
108
150

this will remove underline for text links also, I want to remove it only for image links, I mean if the anchor tag contains image only and not the text – Rahul Jan 30 '12 at 07:47
Well, you can, for instance, give all `a`s that contain images a certain class and use the `text-decoration:none` only for that class. – Mr Lister Jan 30 '12 at 07:50
this solution works if the contents (links) are static, in my case these links are added to site by end user using CMS, I have no control to add class to such links with css only I might have to use jquery here. Isn't it possible with css only? – Rahul Jan 30 '12 at 07:56
No, not without handles like class names and such. You will need javascript then. Or something server side, if adding the stuff causes a page load. – Mr Lister Jan 30 '12 at 08:00
is there something available in css3 with pattern matching and attribute selector ? with the help of this I may be able to select such anchor tags and remove the underline from these tags? – Rahul Jan 30 '12 at 08:06
1

yep, not getting any way to do it with CSS only approach, using jquery for this particular problem $("a img").parent().css('border','0px'); – Rahul Jan 30 '12 at 11:19

score 0 · Answer 3 · answered Jul 19 '13 at 15:05

I've solved this using jquery just link the jquery.js in the head and put this in the body:

    <script type="text/javascript">

        $("body").ready(function () {

                $("a").has("img").addClass("imglink");

        });
</script>

Then style the class a.imglink

score 0 · Answer 4 · answered Jan 30 '12 at 07:55

0

You could use CSS Descendent Selector

So, in your case:

a > img { text-decoration: none; }

However, the above rule will add the style to the image (that is the descendent) and not the parent, so it might not be what you're looking for. Unfortunately, there is no CSS rule that applies styling to the parent in case of a descendent.

answered Jan 30 '12 at 07:55

Ayush

41,754
51
164
239

Exactly. Giving a child `text-decoration:none` will do nothing for the decoration of the parent. That is, the line will still be drawn. And you're right that CSS does not have any rules for "an element that is the parent of another element". Maybe in CSS4. – Mr Lister Jan 30 '12 at 08:23
@MrLister: CSS4 does seem to have proposed an ascendant selector (http://davidwalsh.name/css4-preview) – Ayush Jan 30 '12 at 08:30

score 0 · Answer 5 · answered Jan 30 '12 at 14:44

If you can't set a class for each link that has an image inside of it, you prolly must use javascript. You could simply add something like this:

jQuery(document).ready(function($) {
    var a_with_img = $('a').children()
    $(a_with_img).parent().css('text-decoration', 'none');
});

This should work, however it's never a good idea to target all the 'a' selectors with js, it's pretty heavy on the load. Might cause slowdowns to your overall pageload.

remove link underline from image only if the anchor tag contains an img

5 Answers5

Linked

Related