Underline on Hover for Main Navigation

Could I have help with coding an underline to show up when you hover over a link in the main navigation at the top? Similar to the way this does at the top:

https://kaye.hu/ett/personal.php?utmmedium=social&utmsource=pinterest&utmcampaign=tailwindtribes&utm_content=tribes

Using Brine Template.

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.

Is it possible to slow down the decoration so that the underline appears more gradually?

On 9/19/2023 at 7:36 AM, 67Chevy said:

Is it possible to slow down the decoration so that the underline appears more gradually?

Change code to this

.header-nav-item a:hover {
    text-decoration: underline;
}
.header-nav-item a:hover, .header-nav-item a {
    transition: all 0.5s ease !important;
}