Navigation hover effect for Kester template

Site URL: http://amphibian-soybean-gxlk.squarespace.com

Hello

I'm using the Kester template and would like to create a simple hovering effect for my navigation bar.

All I want is for a line to appear under the 'Me' or 'My Work' text when you hover over it, and for there to be no line underneath either when they are active.

Could someone help? 

Add to Home > Design > Custom CSS

.header-nav-item--active a {
    background-image: none !important;
}
.header-nav-item a:hover {
    background-repeat: repeat-x;
    background-image: linear-gradient(to right,currentColor 100%,currentColor 0) !important;
    background-size: 1px 1px;
    background-position: 0 calc(100% - 0.1em) !important;
    white-space: initial;
}