(Squarespace) Navigation link underline on hover

[tuanphan]

To add underline to Navigation link on Hover, like this.

You can use this code to Custom CSS box.
If code doesn’t work, you can comment below, message or email me.

div.header-nav-item:not(.header-nav-item--active)>a:hover {
    text-decoration: none !important;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: repeat-x;
    background-size: 1px 1px;
    background-position: 0 100%;
    background-position: 0 calc(~"100% - 0.1em");
}

To change underline color, change this line

background-image: linear-gradient(currentColor, currentColor);

to this

background-image: linear-gradient(red, red);