html - 边界底部问题(悬停时向下扩展)

Question

我正在做一个导航，我似乎无法弄清楚如何使底部边框向上增加，而不是向下扩展(这反过来将我的标题扩展了几个像素)，我可以修复设置高度的扩展标题，但边框仍将向下而不是向上延伸。

CSS:

header {
  margin: 0;
  padding: 0;
  left: 0;
  top: 0;
  width: 100%;
  position: absolute;
  background: #000000;
}
ul {
  list-style-type: none;
  display: block;
  margin: 0 0 0 20px;
  padding: 0;
}
ul li {
  display: inline-block;
  padding: 0;
}
ul li a{
  display: block;
  border-bottom: 1px solid #fff;
  font-size: 19px;
}
ul li a:hover{
  border-bottom: 2px solid #fff;
  background: #333;
  font-size: 19px;
}

HTML:

<header>
  <ul id="nav">
    <li><a href="">link 1</a></li>
    <li><a href="">link 2</a></li>
    <li><a href="">link 3</a></li>
  </ul>
</header>

JSFiddle:

http://jsfiddle.net/Artsen/EZWvF/

Answer 1

所以你想将 border-bottom 增加到顶部，对吧？

我最近不得不为一个网站做这件事。除了设置特定的填充和边框属性之外别无他法。

我在这里编辑了你的 jsfiddle:http://jsfiddle.net/EZWvF/2/ (更改了一些属性以使测试用例更加可见)

原理是:悬停时交换 padding-bottom 和 border-bottom 的像素值。 这些是解决方案的关键行:

ul li a {
 border-bottom: 1px solid white;
 padding-bottom: 5px;
}
ul li a:hover {
 border-bottom: 5px solid white;
 padding-bottom: 1px;
}

注意:这仅在您不添加 css-transition 时有效。如果你取消引用我放在 fiddle 中的 css-transition，你会看到 div 仍然扩展到底部。如果您想要 ss-transition，您需要向 li 添加一个单独的 div 以模仿边框。