是否可以从开发者使用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;
}

站点代码

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

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>

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

Answer 2

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

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

语法：自动 |从字体 | |

例如

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

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

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