@last-child的回答很棒!

然而，给我的H2添加边框会产生一个比文本更长的下划线。

如果你正在动态编写CSS，或者如果你像我一样幸运，知道文本将是什么，你可以这样做:

把内容修改成合适的长度 Text)设置字体颜色为透明(或rgba(0,0,0,0))

下划线<h2>Processing</h2>(例如)， 更改last-child的代码为:

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

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

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

如果你想:

多行 虚线 自定义底部填充 没有包装

下划线，你可以使用1像素高度的背景图像重复x和100% 100%的位置:

display: inline;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAYAAAD0In+KAAAAEUlEQVQIW2M0Lvz//2w/IyMAFJoEAis2CPEAAAAASUVORK5CYII=') repeat-x 100% 100%;

你可以用px或em之类的东西替换第二个100%来调整下划线的垂直位置。如果你想添加垂直填充，你也可以使用calc，例如:

padding-bottom: 5px;
background-position-y: calc(100% - 5px);

当然，你也可以用另一种颜色、高度和设计制作你自己的base64 png图案，例如:http://www.patternify.com/ -只需设置正方形宽度和高度为2x1。

灵感来源:http://alistapart.com/article/customunderlines

如果您正在使用文本装饰:underline;，那么您可以使用text-underline-position: under;在下划线和文本之间添加空格

有关更多的文本下划线位置属性，您可以查看这里

我知道这是一个老问题，但对于单行文本设置显示:内联块，然后设置高度，这对我来说很好地控制了边框和文本之间的距离。

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