以下是对我很有效的方法。

<风格type = " text / css " > # underline-gap { 文字修饰:下划线; text-underline-position:下; ｝ > < /风格 身体< > < h1 id = " underline-gap " > < a href = " https://Google.com " >谷歌< / > < / h1 > < /身体>

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

你可以使用:

text-underline-position: under;

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

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

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

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

如果你想:

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

下划线，你可以使用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

看我的小提琴。

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