New Bookstore! Save 20% on books with discount code: LAUNCH
Web Dev + WordPress + Security

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> &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>

Jeff Starr
About the Author
Jeff Starr = Fullstack Developer. Book Author. Teacher. Human Being.
USP Pro: Unlimited front-end forms for user-submitted posts and more.
Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
The Tao of WordPress: Become your own WordPress guru.
Thoughts
Book updates complete! DigWP, .htaccess, Tao-WP, and WP Themes books all updated and current with all the latest.
Stop giving so much juice to social media. Get a site and OWN your content.
I would give my left testicle for macOS Finder to remember column widths.
The chemical name for titin (the largest known protein) has 189,819 characters and takes several hours to pronounce.
Working on book updates, should be available for download sometime next week.
iCloud is like the Terminator. It will never stop trying to get your data. An endless fight on each Apple device to keep iCloud disabled and empty.
Take a screenshot with Firefox (no extension required). Open Developer Tools Settings and enable the “Take a screenshot” button. Then click the button :)
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.