If in any case you wish to have a nice animated underline on hover but on single line text or link, here comes a handy- cherry solution:
First of all, don’t expect to make it play on older browsers such as Internet Explorer 8 or below. But that’s not tragic, old browsers won’t see anything bad; they’ll just miss the fancy cherry stuffs!
So let’s say you have that nice tag “a” (link) with the ridiculous class name "hoverme"
<a class="hoverme" href="#justgo">Hallo kity</a>
So here is the cherry styling:
<style>
a{ color:
#000;font-family:tahoma,serif; text-decoration: none;}
a.hoverme { position: relative; display: inline-block; }
a.hoverme:before {
position: absolute;
left: 50%;
bottom: -2px;
content: ""
width: 0px;
-webkit-transition: all 0.3s;
-ms-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
opacity: 0;
border-bottom: 1px solid #000;
}
a.hoverme:hover:before
{
left: 0;
width: 100%;
opacity: 1;
border-bottom-color: #A69E9E;
}
</style>
You can also see the demo here:
http://jsfiddle.net/nmcobalt/nm6qjbdy/
So what just happened?
Well it’s really simple. The link must have position relative and be at least display inline-block or block; (this is required for IE). Also don’t forget that this only works on single line text or link.
We need to set the pseudo class : before. We set the starting position and what style we wish to add, such as shadows and the likes. We set the transition to 0.3s and the opacity to 0 in order to make it hidden at startup.
After the initialization we set the :hover for the pseudo class : before. There we set what should be visualized when we hover… It’s really up to you to create more “cherry full“ fancy effect; the key to success is the powerful pseudo classes: before or: after.