Pure CSS: Remove Link Properties for Linked Images with Borders

CSS is very powerful. In this tutorial, we look at how to clean up styles on hyperlinks containing images (e.g., JPG, PNG, GIF) using pure CSS techniques. As well as some related tips and tricks to help you get linked images displaying exactly as intended.

There are many ways to style images with CSS. You can add borders:

img {
	border: thin solid black
	}

..padding and margins:

img {
	border: thin solid black
	padding: 3px;
	margins: 3px;
	}

..and even background graphics:

img {
	background: url(images/grunge.png) repeat 0 0;
	border: thin solid black
	padding: 3px;
	margins: 3px;
	}

You can also use images as links to other images:

<a href="http://domain.tld/images/full-size.png" title="Full-size screenshot">
	<img src="http://domain.tld/images/thumbnail.png" alt="Thumbnail image" />
</a>

If so, you will probably want to style your links:

a:link, a:visited {
	border-bottom: 1px solid red;
	text-decoration: underline;
	color: red;
	}	
a:hover, a:active {
	border-bottom: 3px solid red;
	text-decoration: none;
	color: maroon;
	}

But wait! By styling your text links you are also styling your image links, leaving them with unwanted bottom-borders and text-underlines. Assuming we want to fix this, a quick search on the Internet for something like “remove image link underline” would inevitably return the following strategy:

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

Yeah, right. Let’s think about that for a minute. What is the target element here, the anchor (a) or the image (img)? Correct! This oft-prescribed solution for removing linked-image borders targets the image, not the anchor. This removes our previously applied border from the image, not the link. The text-decoration declaration doesn’t do anything because there are no such styles applied to the image element in the first place. Thus, instead of trying to remove link underlines, borders, and other properties by targeting the image element, we need to target any anchor elements that contain an image.

Unfortunately, CSS doesn’t accommodate qualified selectors. If it did, we easily could target image links by writing:

a < img { border: none; }

Until this becomes a reality (*cough*), we must seek an alternate solution. To get there, first consider the popular technique of adding a specific class to all linked images:

a.image-border {
	text-decoration: none;
	border: 0 none;
	}

This method certainly does the job, removing text and border properties from all classed image links without affecting the image styles themselves. Nice, but potentially labor intensive, especially for large sites featuring lots of linked images. Do you really want to go through your database and specifically class all of your image links? Me neither.

Fortunately, CSS3 provides another way of targeting specific types of links via pattern matching and the attribute selector. The attribute selector targets specified element attributes, for example:

a[rel="nofollow"] { 
	background: yellow;
	}
img[alt="arrow"] {
	border: green;
	}
pre[class="perl"] {
	color: red;
	}

In these examples, the attribute selector is targeting specific attribute values; however, with the pattern-matching capabilities of the attribute selector, we can target any of the following elemental scenarios:

• element[attribute]
  — element contains the specified attribute
• element[attribute="value"]
  — contains the specified attribute/value pair
• element[attribute~="value"]
  — attribute value contains the term “value”
• element[attribute^="value"]
  — attribute value begins with the term “value”
• element[attribute$="value"]
  — attribute value ends with the term “value”
• element[attribute*="value"]
  — attribute value contains the string “value”

This pattern-matching functionality of the attribute selector provides designers with a method of targeting anchors referencing specific file types. Specifically, using the [attribute$="value"] selector, we can match any link that targets an image of any file type. For example, to target a series of thumbnails targeting a gallery of PNG images, we write:

a[href$=png] {
	text-decoration: none;
	border: 0 none;
	}

..which effectively neutralizes borders and underlines from the linked images. Of course, we may target as many different image types as necessary. For example, here we are targeting all anchor references for JPGs, PNGs, and GIFs:

a[href$=jpg], a[href$=jpeg], a[href$=jpe], a[href$=png], a[href$=gif] {
	text-decoration: none;
	border: 0 none;
	}

As far as I know, this is the best solution for removing anchor properties from image links without affecting image properties. Unfortunately, this technique is far from perfect. Specifically, there are two cases where this technique fails:

• Image links not referencing targetable file types
• Text links referencing targeted file types

In the first case, any image links that aren’t specifically targetable via the attribute selector will not be affected. For example, we can style image links targeting images, audio, and video file types, but for general web resources, directory URLs, and other non-targetable/non-specific references, the attribute-selector method is essentially useless.

For the second case, text links that reference targeted images will be styled accordingly. In other words, this “attribute-selector” method does not differentiate between image links and text links. Any text links pointing to images will also receive the CSS styles.

Even so, for either of these caveats, there is a workaround for specific types of image links. By using alternate pattern-matching rules, it is possible to target other character strings within the href attribute of image links. For example, links targeting a specific URL may be targeted by writing:

a[href*=domain] {
	text-decoration: none;
	border: 0 none;
	}

..or even:

a[href*=directory] {
	text-decoration: none;
	border: 0 none;
	}

..which would remove link styles from any link targeting a specific domain or directory, respectively. This logic may be extended to a variety of scenarios, thereby enabling potential workarounds for either caveat scenario.

Hopefully, the techniques described in this article will give designers more power over how, when, and where their styles are applied. Especially when it comes to removing anchor properties from image links, we can use all the help we can get.

About the Author

Jeff Starr = Fullstack Developer. Book Author. Teacher. Human Being.