Center ::before pseudo selector

Question

I'm trying to add a hover effect to my navbar with a pseudo-selector such that it "grows" out of the bottom, screenshot below:

As you can see the issue, the little underline is not quite centered, how would I go about achieving that?

.nav-link-grow-up::before {
  height: 0%;
  display: inline-block;
  text-align: center;
  width: 3%;
  bottom: 0px;
}

.nav-link-grow-up:hover::before {
  height: 5px;
}

Here's my code so far