如何美化下划线

特别声明:小站已开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

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;文本就会有下划线的效果。

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

剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/css/styling-underlines-web.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部