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

I have the following CSS and markup on my site which produces an underline when I hover over the Account link.

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

By default, the underline is shown one pixel clear of the text. Is it possible to have the underline directly under the text without the one pixel clearance.

默认情况下,下划线显示为文本的一个像素。是否可以在没有一个像素间隙的情况下直接在文本下方使用下划线。

I would like this for all links on my site, if possible.

如果可能的话,我希望我的网站上的所有链接。

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;

}

Account

4 个解决方案

#1

3

Yes, you can use a bottom border, but you need to enable inline-block styling in order to adjust the line-height of the anchor properly:

是的,您可以使用底部边框,但是您需要启用内联块样式才能正确调整锚点的线高:

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;

}

#2

1

You'd want to make the a block, otherwise padding can't effect anything.

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

a {display:block;行高:0.75em; ...等}

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

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

#3

1

No, you can't modify that. However you could fake it with something like the following:

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

a:hover, a.active{

border-bottom:1px solid black;

}​

a{

padding-bottom:0;

display:inline-block;

line-height:.8 /*adjust accordingly*/;

}

the display:inline-block; is needed for the line-height to work properly.

显示:内联块;需要使行高正常工作。

#4

0

I have also found that setting the height of the div, span or p to less than the font-size and using border-bottom: 1px solid black instead of text-decoration: underline brings the border closer to the text or element.

我还发现将div,span或p的高度设置为小于font-size并使用border-bottom:1px纯黑而不是文本修饰:下划线使边框更接近文本或元素。