如何进行文本修饰:使用2px填充下划线？

Question

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

PS Yeahh伙计们,我知道div有黑色背景颜色和1px*Npx和位置:相对,但它太慢了......

Answer 1

你可以自动换行的span,并给它一个border-bottom用padding-bottom:2px;.

像这样

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

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

Answer 2

对于跨浏览最好是使用text-underline-offset过的text-underline-position，因为text-underline-position不支持iOS的Safari浏览器

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

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

Answer 3

在没有添加额外跨度和更多控制的情况下执行此操作的好方法是使用:after选择器.

特别适用于导航菜单:

.active a:after {
    content: '';
    height: 1px;
    background: black; 
    display:block;
}

如果您希望文本和下划线之间有更多或更少的空间,请添加一个margin-top.

如果您想要更粗的下划线,请添加更多height:

.active a:after {
    content: '';
    height: 2px;
    background: black; 
    display:block;
    margin-top: 2px;
}

Answer 4

只需使用：

text-decoration: underline;
text-underline-position: under;

Answer 5

如何使用 border-bottom:1px; padding:what-you-likepx

Answer 6

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

<div id="line">
Text with line
</div>

只是使用

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