CSS sliding underline effect on hover

index.html
[code language=”html”]
<h1><a href="#" class="slide-left-right">Sliding from left to right</a></h1>
<h1><a href="#" class="slide-right-left">Sliding from left to right</a></h1>
<h1><a href="#" class="slide-center-out">Sliding from center to left and right sides</a></h1>
<h1><a href="#" class="slide-in-out">Sliding in from left and sliding out to the right</a></h1>
[/code]

CSS for sliding the underline from left to right
[code language=”css”]
.slide-left-right
{
text-decoration:none;
display: inline-block;
color:black;
}
/* add a empty string after the elment with class .slide-left-right */
.slide-left-right:after
{
content: ”;
display: block;
height: 3px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease; /* .5 seonds for changes to the width and background-color */
-webkit-transition: width .5s ease, background-color .5s ease; /* Chrome and Safari */
-moz-transition: width .5s ease, background-color .5s ease; /* FireFox */
}
/* Change the width and background on hover, aka sliding out */
.slide-left-right:hover:after
{
width: 100%;
background: black;
}
[/code]

CSS for sliding the underline from right to left
[code language=”css”]
.slide-right-left
{
text-decoration:none;
display: inline-block;
color:green;
position:relative; /* prepare for sliding from right to left */
}
/* add a empty string after the elment with class .slide-right-left */
.slide-right-left:after
{
content: ”;
display: block;
height: 3px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
-webkit-transition: width .5s ease, background-color .5s ease;
-moz-transition: width .5s ease, background-color .5s ease;

/* position the content to the right bottom corner of the parent element to make it slide from right to left on hover */
position:absolute;
right:0;
bottom:0;
}
/* Change the width and background on hover, aka sliding out */
.slide-right-left:hover:after
{
width: 100%;
background: green;
}
[/code]

CSS for sliding from center out to the left and right sides
[code language=”css”]
.slide-center-out
{
text-decoration:none;
display: inline-block;
color:blue;
}
/* add a empty string after the elment with class .slide-center-out */
.slide-center-out:after
{
content: ”;
display: block;
height: 3px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
-webkit-transition: width .5s ease, background-color .5s ease;
-moz-transition: width .5s ease, background-color .5s ease;

margin:auto; /* center the cotent so it will sliding from the midddle to the left and right */
}

/* Change the width and background on hover, aka sliding from the middle to the left and right */
.slide-center-out:hover:after
{
width: 100%;
background: blue;
}
[/code]

CSS for sliding in the underline from the left and sliding it out to the right
[code language=”css”]
.slide-in-out
{
text-decoration:none;
color:brown;
display: inline-block;
position: relative; /* prepare the position for sliding in and out */
}
/* add a empty string before the elment with class .slide-in-out */
.slide-in-out:before
{
content: ”;
display: block;
height: 3px;
width: 0;
transition: width 0s ease, background-color .5s ease;
-webkit-transition: width 0s ease, background-color .5s ease;
-moz-transition: width 0s ease, background-color .5s ease;

/* position the content to the left bottom corner of the parent element to make it to slide in from left to right on hover */
position: absolute;
left: 0;
bottom: 0;
}
/* add a empty string after the elment with class .slide-in-out */
.slide-in-out:after
{
content: ”;
display: block;
height: 3px;
width: 0;
background: brown;
transition: width .5s ease;
-webkit-transition: width .5s ease, background-color .5s ease;
-moz-transition: width .5s ease, background-color .5s ease;

/* position the content to the left bottom corner of the parent element to make it to slide out from left to right on hover */
position: absolute;
right: 0;
bottom: 0;
}

/* Change the width and background on hover, aka sliding in and out */
.slide-in-out:hover:before
{
width: 100%;
background: brown;
transition: width .5s ease;
-webkit-transition: width .5s ease;
-moz-transition: width .5s ease;
}
.slide-in-out:hover:after
{
width: 100%;
background: transparent;
transition: all 0s ease;
-webkit-transition: width 0s ease;
-moz-transition: width .0s ease;
}
[/code]
demo