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 a basic Demo »
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> » select this item</span></a></li>
<li><a href="#">Here is a nice link <span> » select this item</span></a></li>
<li><a href="#">Here is a nice link <span> » select this item</span></a></li>
</ul>
![](https://secure.gravatar.com/avatar/1de0c2609e13647bd516431e3c79da7c?s=200&d=https%3A%2F%2Fperishablepress.com%2Fwp%2Fwp-content%2Fthemes%2Fyes%2Fimg%2Favatar.png&r=pg)
About the Author
Jeff Starr = Designer. Developer. Producer. Writer. Editor. Etc.