Animated underline from left to right on links

animated-underline-link.css

a {
    color: #C0281C;
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size .3s;
}

a:hover, 
a:focus {
    background-size: 100% 2px;
}