html - 是否可以从开发者在CSS中使用 `text-decoration: underline;`创建下划线时更改为下划线高度？

Question

是否可以从开发者在CSS中使用text-decoration: underline;创建下划线时更改为下划线高度？

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

我正在寻找的例子

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

Site code

Answer 1

不幸的是，您无法控制 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>