美化下划线

在CSS中，众所周知使用text-decoration:underline;可以为任何文本添加下划线的效果。

不过我们一般都在初始化里把a标签的下划线去掉(text-decoration : none )，有没有想过美化这些下滑下划线呢~

理想的场景中，强调使用下划线，它应该做到以下几点：

• 下划线应该位于文本基线（baseline）下方
• 下划线应该可以跳过下行字母
• 能改变下线线的颜色、粗细和样式
• 横跨文本
• 在任何背景下都能正常工作

这些要求并不为过，都是很合理的要求，但据我所知，到目前为止，没有哪个纯CSS的方式能满足上述的这些要求。仔细回忆一下，现在在Web中能使用CSS实现文本下线的方案常见的主要有：

• text-decoration
• border-bottom
• box-shadow
• background-image

接下来，我们分别来看看这些方法实现文本下划线效果之间的利弊:

text-decoration

Web中最早用来给文本添加下划线的属性是text-decoration。
只要在元素上使用text-decoration:underline;文本就会有下划线的效果。

如果文本字号较小时，效果看上去还不错，但如果字号变大，效果略显不太完美。

这些都是小问题，使用text-decoration属性最大的问题是没办法自定义（没办法自定义下划线的颜色、粗细和样式）。
但对于下划线的样式，就没办法了。

border-bottom

text-decoration制作文本下划线最大的局限性是没办法自定义下划线颜色、粗细和样式。

如果针对于这方面，在CSS中的border-bottom可以改善这个局限性。使用border-bottom，就可以改变下划线颜色、粗细和样式。

大家也已经注意到了，使用border-bottom来模拟文本下划线的时，如果元素是块元素的话，下划线不仅仅是文本内容宽度长，它的长度将是元素盒子的长度。

这种效果可不是我们想要的效果。只有元素不是块元素（可以显示的通过display来改变，比如inline、inline-block、inline-flex之类），border-bottom制作的下划线效果看上去才是文本的下划线，而不是容器的边框（事实上它是容器的宽度，只不过容器的宽度和文本内容长度相同）。

另外，text-decoration制作的下划线无法控制下划线和文本之间距离，而border-bottom通过padding-bottom或者说line-height可以轻易的控制。

看上去border-bottom优势不少（比如个性化定制，文本间距离），但它也有自己的局限性。除了上面所说的，需要把元素显式的声明为非块元素之外，如果你的文本是多行时，只有最后一行文本才具有下划线效果。

box-shadow

前面介绍的第二种方式是通过border-bottom来模拟text-decoration。大家是否还记得，CSS的box-shadow可以实现border的效果，box-shadow也可以实现text-decoration。
只不过我们采用box-shadow的内阴影inset来模拟:

background-image
使用background-image来做文本下划线，而下划线的样式可以通使用linear-gradient来模拟，然后再通过background-postion以及background-size来控制下划线的位置和线型样式。

background-image模拟文本下划线还有一个强大的优势，除了使用渐变属性之外，还可以使用图片，比如下面的示例：

*如果使用border-bottom和box-shadow模拟文本下划线的效果时，建议配合伪元素::after或::before来实现，这样对于下划线的位置控制更具灵活性。