Spring Sale! Save 30% on all books w/ code: PLANET24
Web Dev + WordPress + Security

Pure CSS: Remove Link Properties for Linked Images with Borders

[ CSS3 ] 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 = Web Developer. Security Specialist. WordPress Buff.
BBQ Pro: The fastest firewall to protect your WordPress.

8 responses to “Pure CSS: Remove Link Properties for Linked Images with Borders”

  1. Christopher Ross 2008/10/14 8:57 am

    Great tutorial! Thanks, I had a project that I was working on last month where I had to strip thousands of border tags from images and replace them with CSS tags, too bad you only wrote this now :)

  2. Very nice article and well focused the problem.

  3. Great article. Some of my gray hair suddenly switched back to it’s natural color! :-)

  4. Youtube Videos 2008/10/26 11:50 pm

    Thanks man!, i spent a lot of time looking for this!, i use a lot of link images in one of my websites, now they gonna lok good.

    Thanks again!, good luck!

  5. Jeff Starr 2008/10/29 4:24 pm

    Thanks everyone for the kind comments — I am glad the article is useful for you! :) Cheers!

  6. great tutorial, your method works like a charm:) thanks!

  7. Great article! You addressed a “real” problem and we appreciate it. Cheers.

  8. The best article on the subject. Thanks for the delicate work Jeff.

Comments are closed for this post. Something to add? Let me know.
Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
Digging Into WordPress: Take your WordPress skills to the next level.
Thoughts
I live right next door to the absolute loudest car in town. And the owner loves to drive it.
8G Firewall now out of beta testing, ready for use on production sites.
It's all about that ad revenue baby.
Note to self: encrypting 500 GB of data on my iMac takes around 8 hours.
Getting back into things after a bit of a break. Currently 7° F outside. Chillz.
2024 is going to make 2020 look like a vacation. Prepare accordingly.
First snow of the year :)
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.