2014年@Marcin Wichary在Medium分享了如何更好的突出链接的下划线效果，@Mary Lou更疯狂的制作出了一个Demo，这个Demo展示了多种突出链接的效果，有些是使用的背景色，有些是使用不同的下划线方式。那么，接下来我们一起看看在Web中，如何更好的美化下划线的效果。

在CSS中，众所周之使用text-decoration:underline;可以为任何文本添加下划线的效果。那仅使用这个来添加下划线会有什么问题呢？我们先不回答这个问题，咱们先来讨论一下理想的场景中，强调使用下划线，它应该做到以下几点：

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

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

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

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

text-decoration

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

如果文本字号较小时，效果看上去还不错，但如果字号变大，效果略显不太完美。这些都是小问题，使用