Remove Bottom Border on Image Links

I prefer to style text links by specifying border-bottom instead of text-decoration. It’s easier to read the text in and around links, and I can spot links more quickly as well. There’s a drawback though: every link has a bottom border, including images.

Manually Add a Class

It’s fairly simple to remedy this for nav, buttons and whatnot, just by using CSS. However, CSS can’t target parent elements, so for every <a> with a nested <img>, a class will need to be added to the <a> to remove its bottom border.

For small sites a class can be added manually to each link surrounding an image, like so:

.image_link {
  border-bottom: none; }

<a class="image_link" href="#">
  <img src="happy.gif">
</a>

Add a Class with JavaScript

Adding a class manually isn’t very scalable for large sites. Another option is to use JavaScript, which is how I prefer to handle it on this site.

$('a img').parent('a').addClass('image_link');

The above example uses jQuery, because I’m already using the library for this site.