总结了一下给文本加下划线的几种方式和优缺点。

1，text-decoration属性
2，标签
3，border-bottom
4，background
5，伪元素after 和before

第一种

没啥说的，一个属性，可以很简单的加上就可以使用，而且可以控制样式，唯一的就是控制不了距离

text-decoration 属性是以下三种属性的简写：
text-decoration-line
text-decoration-color
text-decoration-style

text-decoration-style可以选择的值
solid    默认值。线条将显示为单线。 
double   线条将显示为双线。
dotted   线条将显示为点状线。  
dashed   线条将显示为虚线。
wavy     线条将显示为波浪线。  
initial  设置该属性为它的默认值。请参阅 initial。  
inherit  从父元素继承该属性。请参阅 inherit。

text-decoration-line可以选择的值
none   默认。定义标准的文本。
underline  定义文本下的一条线。
overline   定义文本上的一条线。
line-through   定义穿过文本下的一条线。
blink   定义闪烁的文本。
inherit   规定应该从父元素继承 text-decoration 属性的值 

text-decoration: none;                     /*没有文本装饰*/
text-decoration: underline red;            /*红色下划线*/
text-decoration: underline wavy red;       /*红色波浪形下划线*/

div {
  text-decoration:underline wavy red;
  width: 200px;
}

  <div> 测试测试测试测试测试测试测试测试测试</div>

优势，可以在文本换行的时候一直存在，可以选择各种的样式去组合来达到自己想要的样式，唯一的就是控制不了距离。

第二种

u标签
所有的浏览器都兼容，
在 HTML 4.01 中，u 元素是不被推荐使用的。
在 XHTML 1.0 Strict DTD 中，u 元素是不被支持的。

u {
  display: block;
  width: 200px;
}

 <u>测试测试测试测试测试测试测试测试测试 </u>

优缺点。它可以随着字体的换行而跟随，但是在在 HTML 4.01 中，u 元素是不被推荐使用的。在 XHTML 1.0 Strict DTD 中，u 元素是不被支持的。而且u标签只有实线，没有办法改变距离，改变样式 ，

第三种

border-bottom 下边框，可以使用line-height调节距离

<div> 测试测试测试测试测试测试测试测试测试</div>

div {
  border-bottom: 1px solid #000;
  line-height: 1.5;
  width: 200px;
}

优缺点：只有在文本的最下面出现，如果出现折行的情况下，只会在最后一行出现，根据情况使用。

第四种

background来实现，利用background-size（控制下划线粗细）、background-position（控制下划线位置）实现高度可定制话的下划线，

div {
  display: inline-block;
  background: linear-gradient(grey, grey) no-repeat;
  background-size: 100% 2px;
  background-position: 0 24px;
  /* background-position: 0 24px;（分别指x，y轴的距离px） */
  font-weight: 600;
  background-attachment: fixed;
  width: 300px;
}

 <div> 测试测试测试测试测试测试测试测试测试测试测试测试测试测试测测试测试测试测试测试测试测试测试测试测试测试测试</div>

优缺点：可以控制距离，但是折行以后只在第一行显示的，也就是定位的地方显示。可以根据需求使用。

第五种

伪元素after 和before，利用伪元素添加一个元素，把样式写在伪元素上面

div {
    position: relative;
    width: 200px;
  }
  div:after {before同理
      content: "";
      position: absolute;
      width: 100%;
      height: 1px;
      bottom: 0;
      color: red;
      left: 0;
      border-width: 0 0 1px;
      border-style: solid;
    }

<div> 测试测试测试测试测试测试测试测试测试测试测试测试测试测试测测试测试测试测试</div>

优缺点：伪类实现以后可以控制大小，高度，但是折行以后只会在最后的一行显示，只要不折行一切都ok的，格局自己的情况使用。

总结一下：如果不确定会不会换行的话，就用text-decoration方便一点，u标签虽然也可以实现，但是他的效果text-decoration都可以实现，u标签的样式很单一，控制不了高度和样式，而且u标签在在 HTML 4.01 中，u 元素是不被推荐使用的。在 XHTML 1.0 Strict DTD 中，u 元素是不被支持的。所以建议直接使用text-decoration，
如果不折行的话，border-bottom和background还有伪元素都可以使用，看个人情况使用那个；
不对的可以评论补充或者还有别的方法；