[CSS Animated Underline Links (Growing underline)] #css #links #animation

css-growing-underline.css

a {
    text-decoration: none;
    position: relative;
    color: #3366FF;
    padding: 0 1em 0.125em;
}
a:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 1em;
    right: 100%;
    border-bottom: 2px solid #3366FF;
    transition: right 0.4s;
}
a:hover:after {
    right: 1em;
}