使用CSS,当文本有文本装饰:下划线应用时,是否可以增加文本和下划线之间的距离?
当前回答
如果你想:
多行 虚线 自定义底部填充 没有包装
下划线,你可以使用1像素高度的背景图像重复x和100% 100%的位置:
display: inline;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAYAAAD0In+KAAAAEUlEQVQIW2M0Lvz//2w/IyMAFJoEAis2CPEAAAAASUVORK5CYII=') repeat-x 100% 100%;
你可以用px或em之类的东西替换第二个100%来调整下划线的垂直位置。如果你想添加垂直填充,你也可以使用calc,例如:
padding-bottom: 5px;
background-position-y: calc(100% - 5px);
当然,你也可以用另一种颜色、高度和设计制作你自己的base64 png图案,例如:http://www.patternify.com/ -只需设置正方形宽度和高度为2x1。
灵感来源:http://alistapart.com/article/customunderlines
其他回答
这里有一些很好的解决方案,但每个都有一些问题。每个浏览器的文本下划线偏移量是不同的。squarecandy的答案也可以,但有点复杂。使用border-bottom可以改变文本的布局,并将内容移过来。
添加自定义下划线的一种解决方案是使下划线成为背景图像,其大小与文本大小相关。
a {
/* Change the source image to account for changes to the text colour. It should be a single column. */
background-image: url(data:image/png;base64,iVBORw__EDITED_OUT___0KGgYII=);
/*background-image: url('underlineImage.png');*/
background-size: 1px 1.1em;
background-repeat: repeat-x;
display: inline;
cursor: pointer;
text-decoration: none;
}
随着文本的增加,位置保持相对于文本大小。有了这个,你可以有任何你想要的下划线图像,如“一排星星”,或只是一条线。
上面的示例不包括创建效果所需的完整base64信息。这在所有浏览器上都能很好地工作,因为这是一个基本的东西,并且与旧的浏览器非常兼容。
<a href="#">This _____ is the link</a>
如果背景图片是带有透明度的png格式,那么它在其他元素上的效果会很好。
我知道这是一个老问题,但对于单行文本设置显示:内联块,然后设置高度,这对我来说很好地控制了边框和文本之间的距离。
如果你想:
多行 虚线 自定义底部填充 没有包装
下划线,你可以使用1像素高度的背景图像重复x和100% 100%的位置:
display: inline;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAYAAAD0In+KAAAAEUlEQVQIW2M0Lvz//2w/IyMAFJoEAis2CPEAAAAASUVORK5CYII=') repeat-x 100% 100%;
你可以用px或em之类的东西替换第二个100%来调整下划线的垂直位置。如果你想添加垂直填充,你也可以使用calc,例如:
padding-bottom: 5px;
background-position-y: calc(100% - 5px);
当然,你也可以用另一种颜色、高度和设计制作你自己的base64 png图案,例如:http://www.patternify.com/ -只需设置正方形宽度和高度为2x1。
灵感来源:http://alistapart.com/article/customunderlines
Use
{
text-decoration: underline;
text-underline-offset: 2px;
}
Here, text-underline-offset: 2px; is used to define the distance of the underline from the text, where "2px" is the distance.
Note: text-underline-offset: 2px; can only be used after
text-decoration: underline;
You can also change the thickness of underline by writing
text-decoration: underline 5px;
where "5px" is the thickness.
进一步查询请参考此链接:https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-offset
这个问题有一个很简单的答案
text-decoration: underline;
text-underline-offset: 3px;
Text-underline-offset是CSS自己的方法。 这里有更多关于text-underline-offset的内容