Example: Styling Link Condoms
Explanation
The following are some examples of ways to style the nofollow attribute as well as some generally fun examples. Not all are semantic though so be careful and remember to check that everything works in all browsers, its not my fault if you screw your pages up.
Example 1 - Class ID
This is an example of
the Class ID technique, Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec faucibus blandit quam. This is my link
Example 1 (No follow has been applied) Mauris venenatis, turpis porta elementum laoreet, odio lacus faucibus justo, ut tempus nulla ante eget leo.
Notice the nice image behind it and the lack or any words, if you turn css off you will see the content's of the span tag.
Go back to Styling Link Condoms
Example 2 - Attribute dependent
This is an example of the
Attribute dependent technique, Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec faucibus blandit quam. This is my link
Example 2 (No follow has been applied) Mauris venenatis, turpis porta elementum laoreet, odio lacus faucibus justo, ut tempus nulla ante eget leo.
Notice the nice image behind it and the lack or any words, if you turn css off you will see the content's of the span tag.
Go back to Styling Link Condoms
Example 3 - Combinded with Acroynm
This is an example of the
Attribute dependent technique combined with an Acroynm tag and image substitution, Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec faucibus blandit quam. This is my link
Example 3 NF: Mauris venenatis, turpis porta elementum laoreet, odio lacus faucibus justo, ut tempus nulla ante eget leo.
Notice the nice image behind it and the lack or any words, if you turn css off you will see the content's of the span tag.
Go back to Styling Link Condoms
Example 4 - If Only IE would learn
Remember this doesn't work in IE
This is an example of the
Attribute dependent technique combined with an Acroynm tag and image substitution, Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec faucibus blandit quam. This is my link
External Link(External link) Mauris venenatis, turpis porta elementum laoreet, odio lacus faucibus justo, ut tempus nulla ante eget leo.
Notice the nice image behind it and the lack or any words, if you turn css off you will see the content's of the span tag or in this example you can just use IE.
Go back to Styling Link Condoms