Navigation Border-Bottom Not Affected By Padding? CSS

Question

I am trying to create a responsive navigation menu with a border-bottom animation on a:hover but when I try to space out the text with padding it affects the borders. Is there any way that I can make the borders not be affected by the padding? If not is there any other way I space out the links? Here is my code:

nav {
  text-align: center;
  text-decoration: none;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
nav li {
  display: inline;
}
nav a {
  text-decoration: none;
  padding: 0 25px;
  color: #151413;
}
nav a {
  text-decoration: none;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
  padding-bottom: 0.125em;
  transition: border-bottom-color 0.75s linear 0s;
}
nav a:hover,
nav a.active {
  border-bottom-color: #151413;
  color: #151413;
}
nav ul {
  list-style-type: none;
  list-style: none;
}

<nav>
  <ul>
    <li><a href="#about">About</a>
    </li>
    <li><a href="#contact">Contact</a>
    </li>
    <li><a href="#designers">Designers</a>
    </li>
  </ul>
</nav>

Answer 1

If you want the border to be exclusively under the text and not underneath the spacings between the texts or around the texts then you can use margin instead of padding. You can even apply a combination of both — looks slightly better in my opinion:

nav a {
  text-decoration: none;
  margin: 0 23px;
  padding: 0 2px;
  color: #151413;
}

Always keep the box model in mind:

---

nav {
  text-align: center;
  text-decoration: none;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
nav li {
  display: inline;
}
nav a {
  text-decoration: none;
  margin: 0 23px;
  padding: 0 2px;
  color: #151413;
}
nav a {
  text-decoration: none;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
  padding-bottom: 0.125em;
  transition: border-bottom-color 0.75s linear 0s;
}
nav a:hover,
nav a.active {
  border-bottom-color: #151413;
  color: #151413;
}
nav ul {
  list-style-type: none;
  list-style: none;
}

<nav>
  <ul>
    <li><a href="#about">About</a>
    </li>
    <li><a href="#contact">Contact</a>
    </li>
    <li><a href="#designers">Designers</a>
    </li>
  </ul>
</nav>