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>