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

by nmcobalt

HTML

<a class="hoverme" href=”#”>Hallo kity</a>

CSS

a{ color: #000;font-family:tahoma,serif;
    text-decoration: none;}
a.hoverme {
        position: relative;
        display: inline-block; }
a.hoverme:before {
    color:red;
          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;
}