你也可以用边框底部伪造下划线。这适用于单行，并且如果显示属性允许元素在内容上缩小。（只是避免块）。

这里有一个示例，display:table允许在前后居中文本和换行：http : //codepen.io/gc-nomade/pen/vJoKB/ 这是什么想法？

1. 设置比字体大小更小的行高，会导致文本从其容器溢出。
2. 绘制底部边框以在文本下划线
3. SVG 提供了stroke，在 CSS 中，我们可以text-shadow用与背景相同的颜色做类似的增加。
4. DEMO，您甚至可以为simili下划线设置不同的颜色并添加阴影。

   ---

在较旧的浏览器中，您将失去该box-shadow选项，但您仍然可以使用与文本颜色不同的double,groove或ridge border样式。

感谢@PatNewell 分享这个链接：https ://medium.com/designing-medium/7c03a9274f9

此解决方案用于jQuery将字母自动换行以在<span>标签中加下划线。

演示

作为text-decoration:underline“覆盖”孩子的父母text-decoration:none;（见这里）。该技术是仅用 a 包裹目标字母（要下划线的字母）<span class="underline">并应用于text-decoration:underline;该类。

输出 ：

不加下划线的标志：

g  j  p  q  y  Q  @  {  _  (  )  [  |  ]  }  ;  ,  §  µ  ç  /

HTML :

<h1 class="title">George quietely jumped!</h1>

CSS :

.underline {
    text-decoration:underline;
}

jQuery ：

$('.title').each(function () {
    var s = '<span class="underline">',
        decoded;
    $(this).prop('innerHTML', function (_, html) {
        s += html.replace(/&amp;/g, '&').replace(/(g|j|p|q|y|Q|@|{|_|\(|\)|\[|\||\]|}|;|,|§|µ|ç|\/)/g, '</span>$1<span class="underline">');
        s += '</span>'
        $(this).html(s);
    });
});

文字装饰moduleLevel 3介绍 text-decoration-skip

此属性指定影响元素的任何文本修饰必须跳过元素内容的哪些部分。

您可以通过将其设置为来实现您想要的行为ink：

跳过绘制字形的位置：打断装饰线，让文本的形状通过文本装饰会与字形交叉的位置显示出来。UA 必须向字形轮廓的任一侧跳过一小段距离。

h1 {
  text-decoration: underline;
  text-decoration-skip: ink;
}

<h1>George quietely jumped!</h1>

请注意，主要浏览器尚不支持它。

如果您知道您的背景颜色（在本例中假设为白色），请试一试：

h1 {
    line-height: 0.9em;
    border-bottom: 1px solid black;
    text-shadow: 2px 2px #fff, -2px 2px #fff;
}

想法：

1. 使用border-bottom，并降低line-height，将h1盒模型的底部向上拉。
2. 应用两个非模糊的文本阴影，它们将呈现在文本后面和边框底部上方。 （在本例中，第一个是向下和向左 2px；第二个是向下和向右 2px。）

小提琴：http : //jsfiddle.net/pmn4/a5LZE/

仅供参考 - 浏览器不能很好地使用文本阴影；保守使用！

这会很麻烦，但我会创建一个“下划线”类，然后手动进行

HTML

<h1><span class="underline">Ver</span>g<span class="underline">eten Kanalen</span></h1>

CSS

.underline{text-decoration:underline;}