删除使用CSS文本装饰时的一个像素间隙:下划线
删除使用CSS文本装饰时的一个像素间隙:下划线
提问于 2012-08-07 13:30:43
我的站点上有下面的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
Stack Overflow用户
回答已采纳
发布于 2012-08-07 13:57:57
是的，您可以使用底部边框，但您需要启用内联块样式，以便正确地调整锚的线高：
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
Stack Overflow用户
发布于 2012-08-07 13:35:35
不，你不能修改它。但是，您可以使用如下所示的方法来伪装它：
a:hover, a.active{
border-bottom:1px solid black;
}
a{
padding-bottom:0;
display:inline-block;
line-height:.8 /*adjust accordingly*/;
}要使直线高度正常工作，需要display:inline-block;。
Stack Overflow用户
发布于 2012-08-07 13:55:47
您可能希望使<a>成为一个块，否则填充不会产生任何效果。
a { display: block; line-height:0.75em; ... etc }
a:hover { border-bottom:1px solid #000; }
http://jsfiddle.net/y49jN/3/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11847131
复制相关文章
相似问题
腾讯云开发者
