使用CSS，当文本有文本装饰:下划线应用时，是否可以增加文本和下划线之间的距离?
当前回答
这个问题有一个很简单的答案
text-decoration: underline;
text-underline-offset: 3px;
Text-underline-offset是CSS自己的方法。 这里有更多关于text-underline-offset的内容
其他回答
我用什么:
<span style="border-bottom: 1px solid black"> Enter text here </span>
@last-child的回答很棒!
然而，给我的H2添加边框会产生一个比文本更长的下划线。
如果你正在动态编写CSS，或者如果你像我一样幸运，知道文本将是什么，你可以这样做:
把内容修改成合适的长度 Text)设置字体颜色为透明(或rgba(0,0,0,0))
下划线<h2>Processing</h2>(例如)， 更改last-child的代码为:
a {
text-decoration: none;
position: relative;
}
a:after {
content: 'Processing';
color: transparent;
width: 100%;
position: absolute;
left: 0;
bottom: 1px;
border-width: 0 0 1px;
border-style: solid;
}
这个问题有一个很简单的答案
text-decoration: underline;
text-underline-offset: 3px;
Text-underline-offset是CSS自己的方法。 这里有更多关于text-underline-offset的内容
你可以使用:
text-underline-position: under;
text-underline-offset: {value(px)};
这个属性会根据你提供的offset值来移动链接下面的下划线。
如需更多参考资料，请访问: textunderlineoffest | developer.mozilla.org
您可以使用这个文本-下划线-位置:下面
详情请点击这里:https://css-tricks.com/almanac/properties/t/text-underline-position/
请参见浏览器兼容性。
