Avoid my images (which are links) to have a bottom border

Question

I defined a bottom border (2px) on my anchor links.

The problem: this bottom border is also applied on my image when these are links.

How to avoid this bottom border on images?

Html:

<a href="#">hello</a>
<a href="#">
    <img src="https://cdn0.iconfinder.com/data/icons/cosmo-medicine/40/dog-128.png">
</a>

Css:

a {
    text-decoration: none;
    color: #3e3e3e;
    border-bottom: solid 2px #60bbd2;
}

a img {
    border: 0;
}

a:hover{
    border-bottom: 0px none;
    color: #60bbd2;
}

Jsfiddle: http://jsfiddle.net/8L63n7nu/1/

Thanks.

Okku · Accepted Answer · 2015-06-02T11:18:30.127

The border is not on the img, it's on the a, which is why a img {border: 0;} changes nothing. CSS unfortunetly doesn't have a :parent or :contains-selector which you could use to check if the a contains an image, so you'll have to separate links that do somehow. I suggest giving the links a class, for instance like this:

<a href="#" class="image">
    <img src="https://cdn0.iconfinder.com/data/icons/cosmo-medicine/40/dog-128.png">
</a>

And add rule:

a.image{border:none}

...or...

If you don't want to add classes, you'll have to use JS. jQuery has got the :has() selector, which you can use to check if the element contains specified elements. If you wrap this in a jQuery wrapper, it's run when the page loads and works just like css would.

$(function(){
    $("a:has(img)").css({border:"none"});
});

Be aware, that if you add more links without refreshing the page - for instance with ajax - you'll have to run the above function again to process the new links.

Here's also a working fiddle.

That's not JS. It's jQuery. – Mooseman Jun 02 '15 at 11:18 — Mooseman, Jun 02 '15 at 11:18

score 1 · Answer 2 · answered Jun 02 '15 at 11:04

1

Add a class to the anchors with the image in them

HTML:

<a href="#" class="img">
    <img src="https://cdn0.iconfinder.com/data/icons/cosmo-medicine/40/dog-128.png">
</a>

CSS:

a {
    text-decoration: none;
    color: #3e3e3e;
    border-bottom: solid 2px #60bbd2;
}

a.img {
    border: 0;
}

a:hover{
    border-bottom: 0px none;
    color: #60bbd2;
}

http://jsfiddle.net/8L63n7nu/14/

answered Jun 02 '15 at 11:04

Demnogonis

2,981
5
28
44

Unfortunately I cannot add any classes I don't have access to html code. – Bronzato Jun 02 '15 at 11:05
What about JavaScript/jQuery? – Demnogonis Jun 02 '15 at 11:06
Javascript / jQuery may ba acceptable but I tought it may be possible with css only – Bronzato Jun 02 '15 at 11:07
Unfortunately you can't go up in CSS. Check out Ilpo Oksanen's JS approach – Demnogonis Jun 02 '15 at 11:10
@Demnogonis Not true. Please see [my answer](http://stackoverflow.com/a/30594201/1234256). – Mooseman Jun 02 '15 at 11:11
@Mooseman: You're applying a negative margin to the image to mask the border created by the ``. What I meant by "going up" in CSS was a [parent selector](http://stackoverflow.com/q/1014861/912500), which is not yet supported in CSS [(CSS4 draft)](http://dev.w3.org/csswg/selectors-4/). However your approach works as long as the `` tag doesn't get a padding from somewhere. – Demnogonis Jun 02 '15 at 11:53

Avoid my images (which are links) to have a bottom border

2 Answers2