Chris Curtis dot Org

When you visit my site with a modern browser (Mozilla, FireFox, Safari, etc. but not Internet Explorer) you’ll notice that there are small graphical indicators on the left side of many links in the weblog entries.  These indicators are meant to let you know with a simple glance what type of link they are.  For instance, there are external links to other sites, internal links to pages within this site, links to Google [g]searches[/g], and even email links.

So, how are those created?  Why, :CSS:, of course!  Specifically, it uses some more advanced CSS3 capabilities, which is one reason it only works in the latest browsers.  I use this trick quite a bit in my stylesheet, so I’ll just give a couple of examples from them to give you an idea of what’s possible.

/*—Set the style for links that contain “mailto:”.  These apply anywhere—*/
a[href^="mailto:"] {
   background: transparent url(’/images/aemail.gif’) 0% 50% no-repeat;
   padding-left: 10px;
   }

/* --
Set the style for ALL “http:” links.  This only applies to those inside
of a <div id="main"> element in your HTML. Alter that part as
needed

This makes an “outside” link image appear with them.
—*/
div#main a[href^="http:"] {
   background: transparent url(’/images/aoutside.gif’) 0% 50% no-repeat;
   padding-left: 10px;
   white-space: nowrap;
   }

/*—
If the link points to your own domain, then override the previous
style and specify a new one.  Insert your domain.

Typically, this makes it so no images appear.
—*/
div#main a[href^="http://example.com"],
div#main a[href^="http://www.example.com"] {
   background: inherit;
   padding-left: 0px;
   }

/*—
Specify a style for links to another particular site.  In this case
I wanted to make links to Google look different.
—*/
div#main a[href^="http://google.com"],
div#main a[href^="http://www.google.com"] {
   background: transparent url(’/images/google_outside.gif’) 0% 50% no-repeat;
   }

(Incidentally, I originally saw this technique and an explanation for it on another website and simply modified it for my own use.  Just want to make it clear that someone else deserves the kudos for coming up with the idea!)

Posted Friday February 20, 2004 in CSS Tricks by Chris Curtis

This is an older entry and as such, it may be by a guest author or contain formatting problems / extraneous code. If you notice something wrong with the entry, please use the Contact page to let me know the entry title and issue.