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/

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

1 个答案: