0

我的网站上有以下 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>
4

4 回答 4

2

是的，您可以使用底部边框，但您需要启用 inline-block 样式才能正确调整锚点的行高：

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 演示

于 2012-08-07T13:57:57.540 回答
0

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

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

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

是display:inline-block;line-height 正常工作所必需的。

于 2012-08-07T13:35:35.460 回答
0

你想要制作<a>a 块，否则填充不会影响任何东西。

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

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

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

于 2012-08-07T13:55:47.170 回答
0

我还发现height将 div、span 或 p 设置为小于font-size并使用border-bottom: 1px solid black而不是text-decoration: underline使边框更接近文本或元素。

于 2012-09-05T10:36:37.350 回答