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

Question

我正在尝试在 a:hover 上创建带有边框底部动画的响应式导航菜单，但是当我尝试 space 使用填充填充文本时，它会影响边框。有什么方法可以使边框不受填充影响？如果没有，有没有其他方法可以让我 space 退出链接？这是我的代码：

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>

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

Navigation Border-Bottom Not Affected By Padding? CSS

html

css

navigation