当开发人员在CSS中使用“ text-decoration：underline;”创建下划线时，是否可以更改下划线的高度？

Question

从开发人员text-decoration: underline;在CSS中用于创建下划线时起，是否可以更改下划线的高度？

使用CSS，我使带有“＃title4”的“ id”的单词“ about”带有下划线，我想知道如何更改下划线到单词的高度距离，从而使两者之间的距离更大？

我要寻找的例子

#title4 {
font-size: 2.5rem;
font-weight: 700;
margin-top: 5rem;
text-decoration: underline;
}

网站代码

Answer 1

我迟到了，但这对某人仍然有用。通过使用text-underline-offset: ...px你可以改变它们之间的差距。

Answer 2

不幸的是，您无法控制text-decoration文本之间的高度和间距。所以我已经习惯了border-bottom。希望对您有帮助。

#title4 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-top: 5rem;
    border-bottom: 5px solid #000;
    display: inline-block;
    padding-bottom: 10px;
    font-family: sans-serif;
}

<h1 class="text-center" id="title4">About</h1>

Answer 3

text-decoration-thickness CSS 属性设置用于元素中文本的装饰线的粗细或宽度，例如下划线、下划线或上划线。

（Edge 87、Firefox 70、Safari 12、Chrome 87）

语法：auto | 来自字体| |

例如

 .css_class
{
  text-decoration: underline;
  text-decoration-color: red;
  text-decoration-style: solid;
  text-decoration-thickness: 5px;
}

<div class="css_class">Test</div>