Bottom border underline the text only

Question

Hi I would like the border bottom underline to look like so,

So basically it will only underline the text,

I noticed on my site (Test set up here) it expands the full width like this below,

I've noticed I need to reduce the blue, the width/Height, although I have not managed to achieve this and keep the nav bar justified,

I did try and remove the nav-justified, and use text-align: center, but it would not center up.

Question: How can I keep the nav bar centered while having the border bottom only expanding to the length of the text.

Thank you.

Answer 1

Just wrap the text inside the <a></a> tags with a span and apply the border to the <span>instead of the <a>. So you will get something like this:

<a class="menu" href="link"><span>Shop</span></a>

and then in the css something like this:

a.menu:hover span {
  border-bottom: 2px solid black;
}