CSS如何美化下划线

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

如果文本字号较小时,效果看上去还不错,但如果字号变大,效果略显不太完美。这些都是小问题,使用text-decoration属性最大的问题是没办法自定义(没办法自定义下划线的颜色、粗细和样式)。它使用的是colorfont-size来控制下划线的颜色和粗细,但对于下划线的样式,咱们就没办法了。

如果你时常关注CSS规范的更新的话,你肯定知道在CSS Text Decoration Module Level 3已对text-decoration有所变更,变成了text-decoration-*。这个我们稍后会简单的讨论,如果你迫不急待的话,你可以阅读《更好利用text-decoration属性》一文。

border-bottom

text-decoration制作文本下划线最大的局限性是没办法自定义下划线颜色粗细样式。如果针对于这方面,在CSS中的border-bottom可以改善这个局限性。使用border-bottom意味着,你可以改变下划线颜色、粗细和样式风格。

我想大家也已经注意到了,使用border-bottom来模拟文本下划线的时,如果元素是块元素的话,下划线不仅仅是文本内容宽度长,它的长度将是元素盒子的长度。这种效果可不是我们想要的效果。只有元素不是块元素(可以显示的通过display来改变,比如inlineinline-blockinline-flex之类),border-bottom制作的下划线效果看上去才是文本的下划线,而不是容器的边框(事实上它是容器的宽度,只不过容器的宽度和文本内容长度相同)。

另外,text-decoration制作的下划线无法控制下划线和文本之间距离,而border-bottom通过padding-bottom或者说line-height可以轻易的控制。看上去border-bottom优势不少(比如个性化定制,文本间距离),但它也有自己的局限性。除了上面所说的,需要把元素显式的声明为非块元素之外,如果你的文本是多行时,只有最后一行文本才具有下划线效果。

box-shadow

前面介绍的第二种方式是通过border-bottom来模拟text-decoration。大家是否还记得,CSS的box-shadow可以实现border的效果,那言外之意,box-shadow也可以实现text-decoration。只不过我们采用box-shadow的内阴影inset来模拟:

background-image

在《37个CSS3 Patterns Gallery》一文中,@Lea Verou把CSS中的渐变运用的出神入化。那么我们是否可以考虑使用background-image来做文本下划线,而下划线的样式可以通使用linear-gradient来模拟,然后再通过background-postion以及background-size来控制下划线的位置和线型样式。

background-image模拟文本下划线还有一个强大的优势,除了使用渐变属性之外,还可以使用图片,比如下面的示例:

text-decoration-*

我们在说第一种方案的时候,就提到了text-decoration-*属性,这个属性在最新版本中已做了优化。前面提到过,在CSS以前的text-decoration规范中,它的局限性是没办法自定义下划线的颜色、粗细、样式和位置。但在最新的版本中已扩展出来几个相关的属性:

  • text-decoration-color
  • text-decoration-style
  • text-decoration-skip

有关于这方面的详细介绍,可以阅读《更好利用text-decoration属性》一文。

具体的效果,可以看下面这个示例:

总结

文章主要介绍了几种纯CSS实现文本下划线的效果,其实除了text-decorationborder-bottombox-shadowbackground-image和最新的text-decoration-*方案之外,还有SVG和Canvas的方案。比如文章最开始提到的@Mary Lou更疯狂的制作的Demo ,里面就有SVG的方案。对于Canvas的方案,如果你感兴趣的话,可以看看Underline.js,它也可以实现文本下划线的效果

最后说一下,如果使用border-bottombox-shadow模拟文本下划线的效果时,建议配合伪元素::after::before来实现,这样对于下划线的位置控制更具灵活性。如果你感兴趣的话,可以自己动手试试。

扩展阅读

原文链接:https://www.w3cplus.com/css/styling-underlines-web.html

发表评论

登录后才能评论