.underline a, .underline span {
    transition: all 0.2s ease; cursor: pointer;
    text-decoration: none;
    padding: 2px 0;
    background-image: linear-gradient(currentColor, currentColor), linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
    background-position: 0 100%, 0 100%;
    background-repeat: no-repeat, no-repeat;
    background-size: 0 1px, 100% 1px;
    transition: background-size .5s;

}


#homeslides .slidetext a p span, 
#homeslides .slidetext a h2 span{
	padding: 0;
	background-size: 0 2px, 100% 2px;
}



.underline a:hover,
.underline span:hover {
    background-size: 100% 1px, 100% 1px

}
#homeslides .slidetext a:hover p span,
#homeslides .slidetext a:hover h2 span {
    background-size: 100% 2px, 100% 2px

}

@media all and (max-width: 899px) {
	#homeslides .slidetext a p span, 
#homeslides .slidetext a h2 span{
 
	background-size: 0 1px, 100% 1px;
}
	#homeslides .slidetext a:hover p span,
#homeslides .slidetext a:hover h2 span {
    background-size: 100% 1px, 100% 1px

}
}