CSS Broken / Underline Header Nav not working

Site URL: https://theoculuscreative.com/

I have tried to add custom CSS to my site on multiple occasions, with the aim of underlining header nav items on hover, without any success.

I already have an underline that appears on the current page, I beleive this is something I added with custom CSS a long time ago but I cannot find any evidence of this on my site which is the source of my confusion, and is what I believe stops any other CSS from working. 

If anyone could shed some light on my problem it'd be greatly appreciated.

https://raccoon-fuchsia-t53m.squarespace.com/config/

On 11/24/2021 at 4:22 PM, mattoverboard_ said:

Site URL: https://theoculuscreative.com/

I have tried to add custom CSS to my site on multiple occasions, with the aim of underlining header nav items on hover, without any success.

I already have an underline that appears on the current page, I beleive this is something I added with custom CSS a long time ago but I cannot find any evidence of this on my site which is the source of my confusion, and is what I believe stops any other CSS from working. 

If anyone could shed some light on my problem it'd be greatly appreciated.

https://raccoon-fuchsia-t53m.squarespace.com/config/

Try in Home > Design > Custom Css

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

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too