Get Firefox to highlight nofollow links

If you don’t know what nofollow links are, you probably don’t need to know but for those that do here is how to easily get Firefox to highlight rel=”nofollow” and rel=”external nofollow” links.

It had never occurred to me before but then I spotted a reference on Brian Turner’s blog and a quick search found this original article from Make you go hmm. I’ve hopefully made it a little clearer below as to what needs to be done.

You can also use this example for other custom page formatting but I’ll leave that up to you.

First of all, check to see if you have a usercontent.css file in your Firefox profile folder.
In Windows you can normally find this within Program Files > Firefox > Profiles > (uniqueprofilenumber).default > chrome or if it’s not there, try C:\Documents and Settings > (username) > Application Data > Mozilla > Firefox > Profiles > (uniqueprofilenumber).default > chrome

On a Mac it’s found in User > Library > Application Support > Firefox > Profiles > (uniqueprofilenumber).default > chrome

If you don’t have the file, just open up a text editor and save it as usercontent.css in the location above.

Now open up the css file and add the following code:

a[rel="nofollow"], a[rel="external nofollow"]
{
background-color: yellow !important;
color: blue !important;
font-weight: bold !important;
text-decoration: none !important;
}


Now restart Firefox and give it a whirl by visiting a site that uses nofollows. You should see the link highlighted with a red background.
Have a play with the CSS to tweak it to your preferences.