Save 25% on Wizard’s SQL for WP w/ code: WIZARDSQL
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> » 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>

Jeff Starr
About the Author
Jeff Starr = Designer. Developer. Producer. Writer. Editor. Etc.
The Tao of WordPress: Master the art of WordPress.
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 »
BBQ Pro: The fastest firewall to protect your WordPress.
Thoughts
The Legend of Zelda: Tears of the Kingdom coming May 12, 2023. Absolutely pumped.
Favorite thing for breakfast is a tall glass of cold water. Hits the spot every time.
Fall is my favorite season :)
Still a few days left before “Unlimited” pro licenses are no longer available.
Getting back into it after a nice mini vacation. Time to ramp up and get busy.
Enjoy my 7-year hand-curated collection of free online tools for web dev and design.
Weapons required to rule the world: the weather, common cold, plenty of idiots.
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.