如何使文本装饰：带有 2px 填充的下划线？

Question

我喜欢一个听话的前端开发人员必须使用 2px 填充而不是默认情况下的 1px 创建下划线。是否存在简单的解决方案？

PS Yeahh 伙计们，我知道带有黑色背景颜色和 1px * Npx 和 position: relative 的 div，但是它太慢了……

原文由 NiLL 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以将文本包装在 span 中，并给它一个 border-bottom 和 padding-bottom:2px; 。

像这样

span{
    display:inline-block;
    border-bottom:1px solid black;
    padding-bottom:2px;
}

示例：http: //jsfiddle.net/uSMGU/

原文由 Jason Gennaro 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

对于交叉浏览，最好使用 text-underline-offset 而不是 text-underline-position ，因为 iOS 支持 text-underline-position

所以使用这个答案： https ://stackoverflow.com/a/63607426/1894907

 #line{
    text-decoration-line: underline;
    text-underline-offset: 2px;
}

原文由 Ruslan Korkin 发布，翻译遵循 CC BY-SA 4.0 许可协议