我用什么:

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

这里有一些很好的解决方案，但每个都有一些问题。每个浏览器的文本下划线偏移量是不同的。squarecandy的答案也可以，但有点复杂。使用border-bottom可以改变文本的布局，并将内容移过来。

添加自定义下划线的一种解决方案是使下划线成为背景图像，其大小与文本大小相关。

    a {
        /* Change the source image to account for changes to the text colour. It should be a single column. */
        background-image: url(data:image/png;base64,iVBORw__EDITED_OUT___0KGgYII=);
        /*background-image: url('underlineImage.png');*/
        background-size: 1px 1.1em;
        background-repeat: repeat-x;
        display: inline;
        cursor: pointer;
        text-decoration: none;
    }

随着文本的增加，位置保持相对于文本大小。有了这个，你可以有任何你想要的下划线图像，如“一排星星”，或只是一条线。

上面的示例不包括创建效果所需的完整base64信息。这在所有浏览器上都能很好地工作，因为这是一个基本的东西，并且与旧的浏览器非常兼容。

<a href="#">This _____ is the link</a>

如果背景图片是带有透明度的png格式，那么它在其他元素上的效果会很好。

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

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属性(负数也可以)，您可以将下划线精确地放置在您想要的位置。

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

这是我使用的:

html:

<h6><span class="horizontal-line">GET IN</span> TOUCH</h6>

css:

.horizontal-line { border-bottom: 2px solid  #FF0000; padding-bottom: 5px; }

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