Underline on Hover for Main Navigation

Add to Home > Design > Custom CSS

.Header-nav-item:hover {
   border-bottom: 1px solid #ff0000;
}

Reference: https://beaverhero.com/brine-template-squarespace/#UnderlineNavigationon_Hover@LauraAmber

Thank you!

Hi - I've been trying to get this to work and have used the code Taun Phan provided here, as well as the code below and can't seem to get it to work.

.Header-nav-item::after {
content: '';
background: #000;
height: 2px;
width: 0;
display: block;
margin-top: 2px !important;
transition: width 1s;
}

My website is www.calligrapran.com. Thanks!

8 hours ago, Praneetha said:

Hi - I've been trying to get this to work and have used the code Taun Phan provided here, as well as the code below and can't seem to get it to work.

.Header-nav-item::after {
content: '';
background: #000;
height: 2px;
width: 0;
display: block;
margin-top: 2px !important;
transition: width 1s;
}

My website is www.calligrapran.com. Thanks!

Use this CSS

.header-nav-item a:hover {
    text-decoration: underline;
}

Thank you @tuanphan!! You're the best.