在Web中给文本添加下划线常常出现在<a>链接的文本上，早期一般使用text-decoration属性给文本添加下划线、删除线等。除了text-decoration之外，CSS还有很多技术方案可以给文本添加下划线效果，比如border-bottom、box-shadow、background-image等。对于Web开发者而言，更庆幸的是，CSS还有更多的，更灵活的特性实现文本下划线的效果。在这篇文章中，将和大家一起聊聊CSS中其他的特性怎么实现一个更有创意的效果。

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

Marie Mosley和他的朋友刚刚在Almanac改动了text-decoration的属性。你可能了解这个属性。例如，很多浏览器在链接处默认text-decoration: underline即添加下划线，当然，你也可以设置 text-decoration: none删除下划线。但你有可能不知道这个属性还可以做很多事情，并且使用各种子属性可以实现更多细致的样式。