这个问题有一个很简单的答案

text-decoration: underline;
text-underline-offset: 3px;

Text-underline-offset是CSS自己的方法。 这里有更多关于text-underline-offset的内容

不，但是你可以使用border-bottom: 1px solid #000和padding-bottom: 3px。

如果你想要与“下划线”(在我的例子中是边框)相同的颜色，你只需省略颜色声明，即border-bottom-width: 1px和border-bottom-style: solid。

对于多行，您可以将多行文本包装在元素内的span中。例如，<a href="#"><span>插入多行文本在这里</span></a>然后添加border-bottom和padding在<span> - Demo

Use

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

Here, text-underline-offset: 2px;  is used to define the distance of the underline from the text, where "2px" is the distance.

Note: text-underline-offset: 2px;  can only be used after 
                  text-decoration: underline;

You can also change the thickness of underline by writing
                   text-decoration: underline 5px;
where "5px" is the thickness.
      

进一步查询请参考此链接:https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-offset

作为多行文本或链接的替代方案，您可以将文本包装在块元素中的span中。

<a href="#">
    <span>insert multiline texts here</span>
</a> 

然后你可以在<span>上添加border-bottom和padding。

a {
  width: 300px;
  display: block;
}

span {
  padding-bottom: 10px;
  border-bottom: 1px solid #0099d3;
  line-height: 48px;
}

你可以参考这把小提琴。https://jsfiddle.net/Aishaterr/vrpb2ey7/2/

我用什么:

<span style="border-bottom: 1px solid black"> Enter text here </span>

以下是对我很有效的方法。

<风格type = " text / css " > # underline-gap { 文字修饰:下划线; text-underline-position:下; ｝ > < /风格 身体< > < h1 id = " underline-gap " > < a href = " https://Google.com " >谷歌< / > < / h1 > < /身体>