How to animate the underline on a menu item on hover

Thanks.

Ah, my apologies. I missed the file name. It's quite difficult to convey specifics w/o sharing the image.

As for the CSS, the underline itself doesn't work on mobile because there's no :hover state on touch screen devices. We can add :focus though so it still appears on tap.

li.mega-menu-item {
    padding: 0px 0px 0px 30px !important;
}

li.mega-menu-item a.mega-menu-link {
    padding: 0px !important;
}

li.mega-menu-item a.mega-menu-link:after {
    left: 0 !important;
}

@media (max-width:768px){
li.mega-menu-item {
    padding: 0 40px !important; 
}

li.mega-menu-item:hover > a.mega-menu-link:after,
li.mega-menu-item:active > a.mega-menu-link:after,
li.mega-menu-item:focus > a.mega-menu-link:after { 
    width: 100%;
}

li.mega-menu-item > a.mega-menu-link:after {
    display: inline-block !important;
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0%;
    height: 2px;
    background: #05b0bf;
    transition: all 0.6s;
}
}

Please note that you will need to check with the mega menu plugin's support if you need to tweak the code more.
The CSS provided should be a good starting point but we cannot provide full custom solution for a third party plugin.
Please refer to this article for more info: https://generatepress.com/what-support-includes/

Thanks for your understanding :)

Thanks, Elvin, much appreciated! I'll give it a try.

No problem. :D