Nav links underline on hover

To make navigation links underline on hover on Squarespace, you can use this code to Website Tools > Custom CSS.

div.header-nav-item>a{
   background-image: linear-gradient(#900,#900) !important;
    background-repeat: repeat-x;
    background-size: 0px 0px;
    background-position: 0 calc(~"100% - 0.1em");
}
div.header-nav-item>a:hover {
    background-size: 2px 2px !important;
}