CSS sliding underline effect on hover

index.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>

CSS for sliding the underline from left to right

.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;
}

CSS for sliding the underline from right to left

.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;
}

CSS for sliding from center out to the left and right sides

.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;
}

CSS for sliding in the underline from the left and sliding it out to the right

.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;
}

demo