【问题标题】:Underline links in navbar in CSS/HTMLCSS / HTML中导航栏中的下划线链接
【发布时间】:2015-06-14 03:15:20
【问题描述】:

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

例如:

首页


类似的东西。

到目前为止我的代码:

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

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

【问题讨论】:

标签: html css navbar underline


【解决方案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/

【讨论】:

  • 谢谢你,安德鲁。这正是我想要的。 :)
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2018-01-31
  • 1970-01-01
  • 2014-10-07
  • 2010-10-28
  • 1970-01-01
  • 1970-01-01
  • 2020-09-26
相关资源
最近更新 更多