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.