Question

我有一个包含常用链接的导航栏，以及improve the user experience I have a bottom border show on hover：

我用以下代码实现了这个目标：

body {
  background-color: #E9EBEE;
  color: #666666;
  margin: 0px;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  font-size: 16px;
}
.nav {
  padding-top: 50px;
  padding-bottom: 5px;
  margin-top: 2em;
  margin-bottom: 6em;
  background-color: #F6F7F9;
  color: #666666;
  font-size: 1.5em;
  line-height: 1.5;
  text-align: center;
}
.nav > .links {
  margin-top: -36px;
  border-left: solid 1px #E9EBEE;
  font-size: 0.8em;
}
.nav > .links > .link {
  float: left;
  position: inherit;
  border-right: solid 1px #E9EBEE;
  border-bottom-width: 2px;
  width: 8em;
  transition: border-color .2s;
}
.nav > .links > .link:hover {
  border-bottom: solid;
  border-bottom-color: #3B5998;
  border-bottom-width: 2px;
  color: #3B5998;
}

<body>
  <div class="nav">
    <div class="links">
      <div class="link">
        Servers
      </div>
    </div>
  </div>
</body>

我希望边界位于nav的底部;为此，我向padding-bottom:11px;添加了.nav > .links > .link，结果是：

结果正是我想要的，但是请注意每个导航项的右边界和左边界已经扩展;将padding-bottom属性添加到.nav > .links > .link时，我应该意识到的事情。

为了解决这个问题，我认为我可以使用border-bottom-height，因为有一个border-bottom-width，但显然没有这样的东西，我不想使用额外的元素，如果可能的话，提供左和右正确的边界。如第一张图片所示，左右边框应大约是所包含文本的高度。

如果没有额外的“包装”元素，这可能吗？

Answer 1

使用伪元素，即::after（如果支持IE8，请使用:after，跨浏览器工作）

body {
  background-color: #E9EBEE;
  color: #666666;
  margin: 0px;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  font-size: 16px;
}
.nav {
  padding-top: 50px;
  padding-bottom: 5px;
  margin-top: 2em;
  margin-bottom: 6em;
  background-color: #F6F7F9;
  color: #666666;
  font-size: 1.5em;
  line-height: 1.5;
  text-align: center;
}
.nav > .links {
  margin-top: -36px;
  border-left: solid 1px #E9EBEE;
  font-size: 0.8em;
}
.nav > .links > .link {
  float: left;
  position: relative;
  border-right: solid 1px #E9EBEE;
  border-bottom-width: 2px;
  width: 8em;
  transition: border-color .2s;
}
.nav > .links > .link:hover::after {
  content: '';
  position: absolute;
  top: calc(100% + 11px);
  left: 0;
  width: 100%;
  height: 2px;  
  background: #3B5998;
}

<body>
  <div class="nav">
    <div class="links">
      <div class="link">
        Servers
      </div>
    </div>
  </div>
</body>

Answer 2

有很多方法可以做到这一点。在大多数情况下，最简单和最干净的选择是创建一个伪元素（由LGSon建议），但有时这是不可能的。例如，您可能已经将两个伪元素用于其他效果，或者您可能无法正确定位它（请注意，伪元素方法要求您将.link元素的position属性设置为{{ 1}} - 对于你的布局，这可能并不总是可能的。）

以下是使用box-shadow的替代技术。它有自己的缺点，最明显的是它只适用于纯色背景。

这个想法很简单：在悬停元素上绘制两个盒子阴影（因为它们可以堆叠！）。底部是比顶部高两个像素。底部是蓝色，顶部是与导航栏相同的颜色。

relative

body {
  background-color: #E9EBEE;
  color: #666666;
  margin: 0px;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  font-size: 16px;
}
.nav {
  padding-top: 50px;
  padding-bottom: 5px;
  margin-top: 2em;
  margin-bottom: 6em;
  background-color: #F6F7F9;
  color: #666666;
  font-size: 1.5em;
  line-height: 1.5;
  text-align: center;
}
.nav > .links {
  margin-top: -36px;
  border-left: solid 1px #E9EBEE;
  font-size: 0.8em;
}
.nav > .links > .link {
  float: left;
  position: inherit;
  border-right: solid 1px #E9EBEE;
  border-bottom-width: 2px;
  width: 8em;
  transition: border-color .2s;
}
.nav > .links > .link:hover {
  color: #3B5998;
  box-shadow:
    0 11px 0 #F6F7F9,
    0 13px 0 #3B5998;
}

是否可以在不影响边界的情况下增加元素的填充？

2 个答案: