使底部边框更靠近文本

Question

我想给我的导航菜单加下划线，但问题是我需要它更厚，所以我使用底部边框，这样我就可以将宽度设置为 6px。

我似乎可以弄清楚如何让边框看起来更接近文本。目前文本和底部边框之间似乎有大约 10px 的间隙，但我不想有任何间隙。

我尝试定位另一个 div 并将其相对于每个 {li} 与 {bottom: 10px} 定位，但我似乎无法让它工作。

这就是我所拥有的

代码

    <div id="menu">
    <ul>
        <li><a href="#home">home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</div>

CSS

#menu {
position: fixed;
left: 25%;
clear: both;
float: left;
font-size: 80px;
z-index: 500;
filter: alpha(opacity=75);
opacity: .75;
}

#menu ul{
text-decoration: none;
list-style-type: none;
margin: 0;
padding: 0;
line-height: 90px;
}

#menu ul li{
text-decoration: none;
list-style-type: none;
margin: 0;
}

#menu ul li a{
border-bottom: 6px solid #000;
text-decoration: none;
list-style-type: none;
color: #000;
}

#menu ul li a:hover{
}

Answer 1

您可以使用

line-height

和

margin

的混合来获得这样的效果，如下所示：

#menu ul li a {
    border-bottom: 6px solid #000000;
    color: #000000;
    display: block;
    line-height: 50px;
    list-style-type: none;
    margin: 20px 0;
    text-decoration: none;
}

Answer 2

如果较长的链接包含换行符，则将

display: inline-block;

与

border-bottom

结合使用可能会导致一些奇怪的行为换行符，请参阅 http://jsfiddle.net/PQZ9H/。或者，您可以使用

background-image

和

background-position

的组合，其优点是不触及显示值。

a {
    text-decoration: none;
    position: relative;
    background-repeat: repeat-x;
    background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==);
    background-position: left 15px;
}
a:hover { background: none; }

一个缺点是您可能必须为您使用的每个字体大小定义背景位置。

使用这种技术，您还可以删除下行部分的边框，例如添加 g 或 y

a span.descender { text-shadow: -1px 0px 0px white, 1px 0px 0px white, -2px 0px 0px white, 2px 0px 0px white, -3px 0px 0px white, 3px 0px 0px white; }

和

<a href="javascript:void(0)"><span class="descender">A link with descenders like g or y</span></a>

参见http://jsfiddle.net/25XNY/1

Answer 3

尝试this（源自俄语http://artgorbunov.ru/bb/soviet/20120510/）文章方法（背景渐变和http://jsfiddle.net/d3WG6/）

<p>Зигварт считал <a><span>критерием истинности необходимость и&nbsp;общезначимость, для&nbsp;которых нет никакой опоры</span></a> в&nbsp;объективном мире.</p>

a { font-size: 50%; border-bottom: 1px dashed red; }
a > span { font-size: 200%; line-height: normal; }

Answer 4

Margin 属性不能改变 border-bottom 位置，所以

<a>

元素的高度

将定义边框底部的位置。

 #menu > ul > li > a {
      height: ;
 }

Answer 5

没有什么是一个小伪元素不能处理的;)

a {
  color: inherit;
  text-decoration: none;
  position: relative;
  &:after {
    --border-height: 2px;
    content: '';
    position: absolute;
    bottom: var(--border-height);
    left: 0;
    width: 100%;
    height: var(--border-height);
    border-bottom: var(--border-height) solid red;
  }
}

<p>The quick brown <a href="#">fox</a> jumped over <a href="#">the lazy dog</a></p>