This nifty CSS link hover effect magically reveals a hidden span of text after specified links. The trick employs an anonymous span nested within an anchor tag. CSS then acts upon the markup with a set of rules that basically says hide the nested span until the link is hovered. Here is an example.

Here is the CSS code and XHTML markup that makes it happen:

a:link, a:visited {
	text-decoration: underline;
	color: #990000;
}
a:hover, a:active {
	text-decoration: none;
	color: #990000;
}
li a:link span, li a:visited span {
	display: none;
}
li a:hover span, li a:active span {
	display: inline;
}

<ul>
 <li><a href="#">Here is a nice link <span> &raquo; select this item</span></a></li>
 <li><a href="#">Here is a nice link <span> &raquo; select this item</span></a></li>
 <li><a href="#">Here is a nice link <span> &raquo; select this item</span></a></li>
</ul>

Related articles

• Pure CSS: Remove Link Properties for Linked Images with Borders
• CSS/(X)HTML Tutorial: Hovering Accessibility Jump Menu
• Firefox CSS Magic
• Add RSS Feed Link Icons to WordPress Category Listings
• One Link to Open Them All
• Exploring the (X)HTML Link Element
• Sharpen Your Site by Removing Unwanted Link Border Outlines