Underline main nav items when hovering over

Site URL: https://calliope-strawberry-54ay.squarespace.com/

Is there a way to underline nav items (primary and secondary) when hovering over them?

Thank you 

Hi. It looks like you solved with this code?

nav a:hover {
    background-size: 100% .5px !important
}

nav a {
    padding-bottom: 3px;
    overflow: visible !important;
    background-repeat: no-repeat !important;
    background-image: linear-gradient(to right,currentColor 100%,currentColor 0) !important;
    background-size: 0% .5px !important;
    background-position: 0% 100% !important;
    white-space: initial;
    transition: all ease-in-out 500ms !important;
    -ms-transition: all ease-in-out 500ms !important;
    -moz-transition: all ease-in-out 500ms !important;
    -webkit-transition: all ease-in-out 500ms !important
}