Book Sale! Save 20% on all books w/ code: WP2024
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 = Web Developer. Security Specialist. WordPress Buff.
Digging Into WordPress: Take your WordPress skills to the next level.
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
It's all about that ad revenue baby.
Note to self: encrypting 500 GB of data on my iMac takes around 8 hours.
Getting back into things after a bit of a break. Currently 7° F outside. Chillz.
2024 is going to make 2020 look like a vacation. Prepare accordingly.
First snow of the year :)
BF Sale! Save 40% on all Pro WordPress plugins and books w/ code FRIDAY23
Sincerely trying to engage more on social media. I love the people not the platforms.
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.