Web上的下划线样式

对链接下方的下划线进行样式设置可能是一项棘手的工作，而我经常会视情况而忘记最佳方法。 不过，值得庆幸的是， 约翰·詹姆森 （ John Jameson）使我们加快了这篇宾客帖子的速度。

有多种不同的样式可以用来标记下划线。 也许您还记得这篇文章Crafting链接在Medium上强调 。 中型并没有做任何疯狂的事情; 他们只是想在其文字下方创建一个看起来很普通的线条。

细的黑色下划线，下级周围有空白-通过Marcin Wichary， “中型”Craft.io路线 下划线

这是一个非常基本的下划线，但是它的大小合适，并且也跳过了下划线。 绝对好于大多数浏览器的默认设置。 好吧，事实证明，要在网络上获得该样式，Medium必须经历很多麻烦。 两年后，要绘制漂亮的底线仍然很困难。

目标

仅使用text-decoration: underline什么问题？ 如果我们在谈论理想情况，则下划线应该能够执行以下操作：

• 将自身置于基线以下
• 跳过后代
• 更改颜色，厚度和样式
• 重复换行文字
• 在任何背景下工作

我认为这些都是非常合理的要求，但是据我所知，没有直观的方法可以在CSS中实现所有这些。

方法

那么，我们可以在网络上加下划线的所有不同方式有哪些？

这是我能想到的：

• text-decoration
• border-bottom
• box-shadow
• background-image
• SVG过滤器
• Underline.js（画布）
• text-decoration-*

让我们一一列出，并讨论每种方法的优缺点。