Nifty CSS Link Hover Effect

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>