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

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

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

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

请参见浏览器兼容性。

我用什么:

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

@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;
}

看我的小提琴。

你需要使用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 >