使用CSS,当文本有文本装饰:下划线应用时,是否可以增加文本和下划线之间的距离?
当前回答
以下是对我很有效的方法。
<风格type = " text / css " > # underline-gap { 文字修饰:下划线; text-underline-position:下; } > < /风格 身体< > < h1 id = " underline-gap " > < a href = " https://Google.com " >谷歌< / > < / h1 > < /身体>
其他回答
作为多行文本或链接的替代方案,您可以将文本包装在块元素中的span中。
<a href="#">
<span>insert multiline texts here</span>
</a>
然后你可以在<span>上添加border-bottom和padding。
a {
width: 300px;
display: block;
}
span {
padding-bottom: 10px;
border-bottom: 1px solid #0099d3;
line-height: 48px;
}
你可以参考这把小提琴。https://jsfiddle.net/Aishaterr/vrpb2ey7/2/
不,但是你可以使用border-bottom: 1px solid #000和padding-bottom: 3px。
如果你想要与“下划线”(在我的例子中是边框)相同的颜色,你只需省略颜色声明,即border-bottom-width: 1px和border-bottom-style: solid。
对于多行,您可以将多行文本包装在元素内的span中。例如,<a href="#"><span>插入多行文本在这里</span></a>然后添加border-bottom和padding在<span> - Demo
如果您正在使用文本装饰:underline;,那么您可以使用text-underline-position: under;在下划线和文本之间添加空格
有关更多的文本下划线位置属性,您可以查看这里
你可以使用:
text-underline-position: under;
text-underline-offset: {value(px)};
这个属性会根据你提供的offset值来移动链接下面的下划线。
如需更多参考资料,请访问: textunderlineoffest | developer.mozilla.org
2021年更新: text-underline-offset现在几乎适用于所有主流和最新版本的浏览器(IE11不支持):https://caniuse.com/?search=text-underline-offset
2019年更新:CSS工作组发布了文本装饰等级4的草案,该草案将添加一个新的属性text-underline-offset(以及text-decoration-thickness),以控制下划线的确切位置。在撰写本文时,它还是一个早期的草案,还没有被任何浏览器实现,但看起来它最终会使下面的技术过时。
原始答案如下。
直接使用border-bottom的问题是,即使使用padding-bottom: 0,下划线往往离文本太远而不好看。所以我们仍然没有完全控制。
提供像素精度的一个解决方案是使用:after伪元素:
a {
text-decoration: none;
position: relative;
}
a:after {
content: '';
width: 100%;
position: absolute;
left: 0;
bottom: 1px;
border-width: 0 0 1px;
border-style: solid;
}
通过更改bottom属性(负数也可以),您可以将下划线精确地放置在您想要的位置。
使用这种技术需要注意的一个问题是,它在行换行时表现得有点奇怪。