WP-Mix

A fresh mix of code snippets and tutorials

CSS reveal nofollow links

In this quick post, you’ll see how to use CSS attribute selectors to reveal any nofollow links included in your web pages.

The rel="nofollow" attribute isn’t as big of a deal as it was when it was first introduced, but it still plays a role in SEO and may be useful depending on your own content-optimization strategy.

Here is a quick CSS code snippet that will highlight all instances of nofollow links on your web pages:

a[rel~=nofollow] {
	background-color: red !important;
	color: white !important;
	}

Once included, this code will apply a red background with white text to all nofollow links on the page. It works by using the CSS attribute selector to match any occurrence of nofollow in the rel attribute. Feel free to customize the styles to make nofollow links display however works best for you.

References

★ Pro Tip:

Digging Into WordPressGA Pro