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

Question

我把下划线部分记下来了。我只是想让下划线本身远离文本。另外，这是我想要的悬停时发生的。

例如：

首页

类似的东西。

到目前为止我的代码：

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

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

Answer 1

使用 border-bottom 而不是 underline，因此您可以使用填充来操纵 link 和下划线之间的 space，如下所示：

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/

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

Underline links in navbar in CSS/HTML

html

css

underline

navbar