Sliding UnderLine aHover Effect

Here We Have Brought Existing trick. This is nothing just a Html/Css Efeect but it is Unique and advance effect. On Mouse Hover  Text Will Underline With Sliding Effect.

Demo:

To See Demo,Bring Your Mouse Here

• To Use This Trick Paste Following Code before </head> in HTML.

CODE:

/* Underline Slide */
.uslide {
display: inline-block;
}
.uslide:after {
content: '';
display: block;
height: 3px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.uslide:hover:after {
width: 100%;
background: #990000;
} 

• Now To Use This Effect use <div class="uslide">-----Your Text Goes Here---</div>

You May Like:

• How To Create A Folder Without Name In PC?