2014年@Marcin Wichary在Medium分享了如何更好的突出链接的下划线效果，@Mary Lou更疯狂的制作出了一个Demo，这个Demo展示了多种突出链接的效果，有些是使用的背景色，有些是使用不同的下划线方式。那么，接下来我们一起看看在Web中，如何更好的美化下划线的效果。
在CSS中，众所周之使用text-decoration:underline;可以为任何文本添加下划线的效果。那仅使用这个来添加下划线会有什么问题呢？我们先不回答这个问题，咱们先来讨论一下理想的场景中，强调使用下划线，它应该做到以下几点：
- 下划线应该位于文本基线（baseline）下方
- 下划线应该可以跳过下行字母
- 能改变下线线的颜色、粗细和样式
- 横跨文本
- 在任何背景下都能正常工作
这些要求并不为过，都是很合理的要求，但据我所知，到目前为止，没有哪个纯CSS的方式能满足上述的这些要求。仔细回忆一下，现在在Web中能使用CSS实现文本下线的方案常见的主要有：
text-decorationborder-bottombox-shadowbackground-imagetext-decoration-*
接下来，我们分别来看看这些方法实现文本下划线效果之间的利弊。
text-decoration
Web中最早用来给文本添加下划线的属性是text-decoration。只要在元素上使用text-decoration:underline;文本就会有下划线的效果。
如果文本字号较小时，效果看上去还不错，但如果字号变大，效果略显不太完美。这些都是小问题，使用text-decoration属性最大的问题是没办法自定义（没办法自定义下划线的颜色、粗细和样式）。它使用的是color和font-size来控制下划线的颜色和粗细，但对于下划线的样式，咱们就没办法了。
如果你时常关注CSS规范的更新的话，你肯定知道在CSS Text Decoration Module Level 3已对text-decoration有所变更，变成了text-decoration-*。这个我们稍后会简单的讨论，如果你迫不急待的话，你可以阅读《更好利用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
在《37个CSS3 Patterns Gallery》一文中，@Lea Verou把CSS中的渐变运用的出神入化。那么我们是否可以考虑使用background-image来做文本下划线，而下划线的样式可以通使用linear-gradient来模拟，然后再通过background-postion以及background-size来控制下划线的位置和线型样式。
background-image模拟文本下划线还有一个强大的优势，除了使用渐变属性之外，还可以使用图片，比如下面的示例：
text-decoration-*
我们在说第一种方案的时候，就提到了text-decoration-*属性，这个属性在最新版本中已做了优化。前面提到过，在CSS以前的text-decoration规范中，它的局限性是没办法自定义下划线的颜色、粗细、样式和位置。但在最新的版本中已扩展出来几个相关的属性：
text-decoration-colortext-decoration-styletext-decoration-skip
有关于这方面的详细介绍，可以阅读《更好利用text-decoration属性》一文。
具体的效果，可以看下面这个示例：
总结
文章主要介绍了几种纯CSS实现文本下划线的效果，其实除了text-decoration、border-bottom、box-shadow、background-image和最新的text-decoration-*方案之外，还有SVG和Canvas的方案。比如文章最开始提到的@Mary Lou更疯狂的制作的Demo ,里面就有SVG的方案。对于Canvas的方案，如果你感兴趣的话，可以看看Underline.js，它也可以实现文本下划线的效果。
最后说一下，如果使用border-bottom和box-shadow模拟文本下划线的效果时，建议配合伪元素::after或::before来实现，这样对于下划线的位置控制更具灵活性。如果你感兴趣的话，可以自己动手试试。
扩展阅读
- Styling Underlines on the Web
- CSS Underlines Suck
- Crafting link underlines on Medium
- Inspiration for Inline Anchor Styles
- 更好利用text-decoration属性
大漠
如需转载，烦请注明出处：http://www.w3cplus.com/css/styling-underlines-web.html