使用CSS文本修饰时删除一个像素间隙：下划线

Question

我的网站上有以下CSS和标记，当我将鼠标悬停在Account链接上时会生成下划线。

默认情况下，下划线显示为文本的一个像素。是否可以在文本下直接下划线，而不用一个像素间隙。

如果可能的话，我想在我网站上的所有链接中使用此功能。

a:active {
    outline: none;
}

a.current {
    text-decoration: underline;
    color: #000000;
    outline: none;
}
a:hover, a.active {
    color: #000000;
    outline: medium none;
    text-decoration: underline;
}

<a href="http://www.ayrshireminis.com/account/login/">Account</a>

Answer 1

是的，你可以使用底部边框，但是你需要启用内联块样式才能正确调整锚点的行高：

a {
    text-decoration: none;
    color: #c64;

    /* cross-browser inline-block styling */
    display:inline-block;
    zoom:1;
    *display:inline;

    /* alter line-height until the border appears where you want it */
    line-height: .7em;
}

a:hover, a:active{
    padding-bottom:0;
    border-bottom:1px solid black;
}

jsFiddle DEMO

Answer 2

不，你不能修改它。但是你可以用以下内容伪装它：

a:hover, a.active{
    border-bottom:1px solid black;
}​

a{
    padding-bottom:0;
    display:inline-block;
    line-height:.8 /*adjust accordingly*/;
}

行高必须display:inline-block;才能正常工作。

Answer 3

你想让<a>成为一个块，否则填充不会影响任何东西。

a { display: block; line-height:0.75em; ... etc }

a:hover { border-bottom:1px solid #000; }

http://jsfiddle.net/y49jN/3/

Answer 4

我还发现将div，span或p的height设置为小于font-size并使用border-bottom: 1px solid black代替text-decoration: underline会使边框更接近文字或元素。