对链接下方的下划线进行样式设置可能是一项棘手的工作,而我经常会视情况而忘记最佳方法。 不过,值得庆幸的是, 约翰·詹姆森 ( John Jameson)使我们加快了这篇宾客帖子的速度。
有多种不同的样式可以用来标记下划线。 也许您还记得这篇文章Crafting链接在Medium上强调 。 中型并没有做任何疯狂的事情; 他们只是想在其文字下方创建一个看起来很普通的线条。
这是一个非常基本的下划线,但是它的大小合适,并且也跳过了下划线。 绝对好于大多数浏览器的默认设置。 好吧,事实证明,要在网络上获得该样式,Medium必须经历很多麻烦。 两年后,要绘制漂亮的底线仍然很困难。
目标
仅使用text-decoration: underline
什么问题? 如果我们在谈论理想情况,则下划线应该能够执行以下操作:
- 将自身置于基线以下
- 跳过后代
- 更改颜色,厚度和样式
- 重复换行文字
- 在任何背景下工作
我认为这些都是非常合理的要求,但是据我所知,没有直观的方法可以在CSS中实现所有这些。
方法
那么,我们可以在网络上加下划线的所有不同方式有哪些?
这是我能想到的:
-
text-decoration
-
border-bottom
-
box-shadow
-
background-image
- SVG过滤器
- Underline.js(画布)
-
text-decoration-*
让我们一一列出,并讨论每种方法的优缺点。