CSS 下划线悬停 - 为什么填充下划线？答案

【问题标题】：CSS Underline Hover - Why is padding underlined?CSS 下划线悬停 - 为什么填充下划线？
【发布时间】：2016-04-16 10:43:57
【问题描述】：

我正在为我的网站设计一个导航栏，我希望链接在悬停时带有下划线。为什么下划线 CSS 规则适用于 nav-section 类？

如何阻止填充被下划线？

请参阅下面的附加代码...

body {
  font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 24px;
  color: #424242;
}

.title {
  float: left;
  padding: 10px;
  font-size: 30px;

}

.nav-section {
  color: #757575;
  float: left;
  padding-top: 16px;
  padding-right: 15px;
  position: relative;
  text-decoration: none;
  cursor: pointer;
}

.nav-section:hover {
  color: #616161
}


.nav-link:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #616161;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}


.nav-link:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

<div class="title">Title</div>
<div class="nav-section">
  <a class="nav-link">Link 1</a>
</div>
<div class="nav-section">
  <a class="nav-link">Link 2</a>
</div>
<div class="nav-section">
  <a class="nav-link">Link 3</a>
</div>
<div class="nav-section">
  <a class="nav-link">Link 4</a>
</div>

【问题讨论】：

请务必查看CSS Box Model。当我开始学习 CSS 时，它对我帮助很大。

标签： html css underline

【解决方案1】：

padding 用于增加元素的大小。您应该使用margin-right 和margin-top 来创建所需的分隔。

body {
  font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 24px;
  color: #424242;
}

.title {
  float: left;
  padding: 10px;
  font-size: 30px;

}

.nav-section {
  color: #757575;
  float: left;
  margin-top: 16px;
  margin-right: 15px;
  position: relative;
  text-decoration: none;
  cursor: pointer;
}

.nav-section:hover {
  color: #616161
}


.nav-link:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #616161;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}


.nav-link:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

<div class="title">Title</div>
<div class="nav-section">
  <a class="nav-link">Link 1</a>
</div>
<div class="nav-section">
  <a class="nav-link">Link 2</a>
</div>
<div class="nav-section">
  <a class="nav-link">Link 3</a>
</div>
<div class="nav-section">
  <a class="nav-link">Link 4</a>
</div>

【讨论】：

太棒了，我知道我很愚蠢，你刚刚证实了这一点