使用CSS，当文本有文本装饰:下划线应用时，是否可以增加文本和下划线之间的距离?
当前回答
作为多行文本或链接的替代方案，您可以将文本包装在块元素中的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/
其他回答
我知道这是一个老问题，但对于单行文本设置显示:内联块，然后设置高度，这对我来说很好地控制了边框和文本之间的距离。
如果你想:
多行 虚线 自定义底部填充 没有包装
下划线，你可以使用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
您可以使用这个文本-下划线-位置:下面
详情请点击这里:https://css-tricks.com/almanac/properties/t/text-underline-position/
请参见浏览器兼容性。
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属性(负数也可以)，您可以将下划线精确地放置在您想要的位置。
使用这种技术需要注意的一个问题是，它在行换行时表现得有点奇怪。
作为多行文本或链接的替代方案，您可以将文本包装在块元素中的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/
