By: Tim Nash

note: Hello year 10 school students its that time of year where you need to find a picture of a cartoon condom, what you thought you were the first feel free to use the one on the left no need to email me - Tim
With all the recent Page Rank jumping up and down I'm sure 1 or 2 people are looking at "nofollow" in a whole new light and not one I approve of, but that said I thought I would have a light hearted look at ways to style a "nofollow" link to help identify them for your users and the possible dangers.

For those unfamiliar with the term link condom, it simply means a link which does not pass any juice, normally this is a simple "nofollow" but it can be redirects and various other techniques as well. I don't know who first coined the term but when combined with Link juice and master link baiter's you begin to realise that perhaps the search engine optimisation industry has a little way to go yet before we reach a level of maturity.

Anyway back to the problem at hand, I have created a tiny little icon to indicate a "nofollow" its a badly drawn condom I'm sure some one can do a better job then me.

I have provided several methods of styling all are very accessible with none requiring javascript or similar just plain HTML and a bit of CSS. I know however a few of the examples are not entirely semantic correct.

Example 1 - Class based

This example is based using ClassID to identify the nofollow and then apply styling, its entirely based on the Max Design method for external links,
The HTML Code

<a class="nofollow" href="#">Example 1<span> (No follow has been applied)</span></a>
Notice both the class and the span that a fair few more tags then normal!
The CSS

a.nofollow span
{
position: absolute;
left: -5000px;
width: 4000px;
}
a.nofollow
{
background: url(icon.gif) no-repeat 100% 0;
padding: 0 20px 0 0;
}
View Demo of Example 1
The results however is not bad with the span tag content off the side of the page and the link condom icon applied, one of its limitations is it doesn't give any clue as to what the funny icon means.

Example 2 - attribute based

This version gets a little more clever and uses some nice css trick to pick up the fact that their is "nofollow" in the rel attribute meaning you can do away with the nofollow class.
HTML Code

<a href="#" rel="nofollow">Example 2<span> (No follow has been applied)</span></a>

Still with the Span tag and still no explanation.
CSS

a[rel~="nofollow"] span {
position: absolute;
left: -5000px;
width: 4000px;
}
a[rel~="nofollow"]
{
background: url(icon.gif) no-repeat 100% 0;
padding: 0 20px 0 0;
}

View Demo of Example 2
The results again not bad but still have the issue of not being able to tell the users why the link has a funny shaped icon next to it.

Example 3 - True image substitution

Up until now we have been simply adding an image to the end of the nofollow link and shunting the span tag of the page, however now we want to keep the second tag on the page swapping from span to acronym and use a true image substitution technique.
This is a very ugly hack purists look away now, semantic people go stare at the floor, everyone else enjoy
HTML Code

<a class="example3" href="#" rel="nofollow" title="My stuff">Example 3 <acronym title="NoFollowed Link proceed with caution">NF:</acronym></a>

Notice the acronym tag here, while the NF part will be hidden our full title will be shown as a tooltip.
CSS code

a[rel~="nofollow"] acronym {
float:none;
padding: 8px 8px 8px 8px;
background: url(icon.gif) no-repeat;
font-size: 0.001px;
line-height: 0.001px;
overflow: hidden;
text-decoration:none;
cursor: help;
color:#FFF;
height: 0px !important;
height /**/:17px;
width:17px;
}

View Demo of Example 3
Its a hack but it provides both an image, usable in blind readers and provides information to the readers all in all job done

Bonus Tip - External Links

So you had fun with nofollows but what about just a normal external, or indeed only highlighting external nofollows? Well things get tricky and the easiest way is to go to methods 1 & 2 however if you want to play with negation psuedo classes, then this small trick will be up your street, its adapted from the max design external link idea but with negation psuedo classes.
Note: This works in proper browsers, so those of you using IE will not see anything.
CSS Code

[href^="http://"]:not([href*="timnash.co.uk"]) span
{
position: absolute;
left: -5000px;
width: 4000px;
}
[href^="http://"]:not([href*="timnash.co.uk"])
{
background: url(exicon.gif) no-repeat 100% 0;
padding: 0 20px 0 0;
}

View Demo of Example 4
Remember that doesn't work in IE and I have yet to find a work around so until then its nothing more then an academic curiosity.