看我的小提琴。

你需要使用border width属性和padding属性。我添加了一些动画，让它看起来更酷:

身体{ background - color: lightgreen; ｝ 一个{ 文字修饰:没有; 颜色:绿色; 边框样式:固体; 边框宽度:0px 0px 1px 0px; 过渡:所有。2s轻松; ｝ 答:{徘徊 颜色:darkblue; 边框样式:固体; 边框宽度:0px 0px 1px 0px; 填充:2 px; ｝ <a href='#' >某处…在彩虹之上(lalala)</a>，蓝色的鸟儿，飞…(推特推特!)，我想知道(嗯)什么a < I ><a href="#">多么美妙的世界!< / >世界!< / i >

我可以使用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>

2021年更新: text-underline-offset现在几乎适用于所有主流和最新版本的浏览器(IE11不支持):https://caniuse.com/?search=text-underline-offset

2019年更新:CSS工作组发布了文本装饰等级4的草案，该草案将添加一个新的属性text-underline-offset(以及text-decoration-thickness)，以控制下划线的确切位置。在撰写本文时，它还是一个早期的草案，还没有被任何浏览器实现，但看起来它最终会使下面的技术过时。

原始答案如下。

直接使用border-bottom的问题是，即使使用padding-bottom: 0，下划线往往离文本太远而不好看。所以我们仍然没有完全控制。

提供像素精度的一个解决方案是使用:after伪元素:

a {
    text-decoration: none;
    position: relative;
}
a:after {
    content: '';

    width: 100%;
    position: absolute;
    left: 0;
    bottom: 1px;

    border-width: 0 0 1px;
    border-style: solid;
}

通过更改bottom属性(负数也可以)，您可以将下划线精确地放置在您想要的位置。

使用这种技术需要注意的一个问题是，它在行换行时表现得有点奇怪。

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

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

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

请参见浏览器兼容性。

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

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

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