Navlink Hover Animation

Underline animation on hover.

Navlink Hover Animation
.nav-link {
    text-decoration: none;
    display: inline-block;
    position: relative;
}

.nav-link::before {
    transition: 300ms;
    border-radius: 4px;
    height: 2px;
    content: "";
    position: absolute;
    background-color: rgb(31, 41, 55);
}

.nav-link-ltr::before {
    width: 0%;
    bottom: 5px;
}

.nav-link-ltr:hover::before {
    width: 100%;
}

Usage

1

Add CSS

In your CSS file add the above code.

2

Add class

In each of your navlink tags add the classes 'nav-link' and 'nav-link-ltr'.