css - 使用css调整下划线和文本之间的距离

Question

我想在文本和下划线之间添加一些空间。但是当我尝试在底部添加一些边框时，它占据了我分辨率的 100% 宽度。所以它看起来像这样:

这是我的CSS:

h1 { 
    font-size: 24pt;
    color: #279839;
    position: relative;
    text-decoration: none;
    padding-bottom: 5px;
    border-bottom: 1px solid #279839;
}

我的页面是多语言的，所以底部边框应该与文本宽度相同。

你能帮我解决这个问题吗？

Answer 1

文本下划线偏移

<h1 style="text-decoration:underline; text-underline-offset:.25em;">text</h1>