你可以使用:

text-underline-position: under;

text-underline-offset: {value(px)};

这个属性会根据你提供的offset值来移动链接下面的下划线。

如需更多参考资料，请访问: textunderlineoffest | developer.mozilla.org

我用什么:

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

您可以使用这个文本-下划线-位置:下面

详情请点击这里:https://css-tricks.com/almanac/properties/t/text-underline-position/

请参见浏览器兼容性。

我可以使用U(下划线标签)

u {
    text-decoration: none;
    position: relative;
}
u:after {
    content: '';
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 1px;
    border-width: 0 0 1px;
    border-style: solid;
}


<a href="" style="text-decoration:none">
    <div style="text-align: right; color: Red;">
        <u> Shop Now</u>
    </div>
</a>

作为多行文本或链接的替代方案，您可以将文本包装在块元素中的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/

不，但是你可以使用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