CSS Cherries: Animated Underline!

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>

Voilà there you are! 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