导航边框底部不受填充影响？ CSS

Question

我正在尝试在a：hover上创建一个带有边框底部动画的自适应导航菜单，但是当我尝试用填充来填充文本时，它会影响边框。有什么办法可以让边框不受填充的影响吗？如果不是，还有其他方法我将链接分开吗？这是我的代码：

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

如果您希望边框仅位于文字下方，而不是文本之间或文本周围的间距下方，则可以使用margin代替padding。你甚至可以应用两者的组合 - 在我看来看起来稍微好一点：

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

始终牢记box model：

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>