Image Links & Styles

The PROBLEM

If all links are styled with, say, a border-bottom, links with images inside get that border and it does not look as nice as it could. This problem comes up a lot if you want links in an article to be styled to stand out more, but you also have images as links.

a {
color: #f36d21;
text-decoration: none;
border-bottom: 1px dotted #f36d21;
}
a:hover { color: #333; }

Solution Options

1. Set images inside links to display:block. Feels a bit hacky and can be limiting.

.block a img { display: block; }

 

2. Use jQuery to find all links with images and then remove the border.

$(document).ready(function () {
$('p a:has(img)').css('border-bottom', '0')
});

 

3. Manually add a class to links with images inside.

.no-border { border-bottom: 0; }

 

I ran into this problem with the theme I am using for my Ramblings blog. I went with the jQuery solution because I wanted it to be applied to all images that I link without having to manually enter an additional class.