CSS / HTML中导航栏中的下划线链接

Question

我有下划线部分。我只是想让下划线本身远离文本。此外，当我悬停时会发生这种情况，这是我想要的。

例如：

首页

---

类似的东西。

到目前为止我的代码：

#menu a:hover { color: #FFF; background-color: #252525; text-decoration:underline; }

如果需要更多信息，请告诉我。

Answer 1

使用border-bottom 而不是underline，这样您就可以使用填充来操纵链接和下划线之间的空间，如下所示：

HTML：

<div id="menu">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
</div>

CSS：

#menu a {
    color: #FFF;
    background-color: #252525;
    text-decoration: none;
    border-bottom: transparent solid 1px;
    padding-bottom: 5px;
}
#menu a:hover {
    color: #FFF;
    background-color: #252525;
    border-bottom: red solid 1px;
}

这是一个带有上述代码的 JSFiddle：https://jsfiddle.net/AndrewL32/e0d8my79/39/