前端开发者学堂 - fedev.cn

如何美化下划线

#text-decoration#会员专栏
发布于 大漠

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属性最大的问题是没办法自定义（没办法自定义下划线的颜色、粗细和样式）。它使用的是color和font-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来改变，比如inline、inline-block、inline-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-decoration、border-bottom、box-shadow、background-image和最新的text-decoration-*方案之外，还有SVG和Canvas的方案。比如文章最开始提到的@Mary Lou更疯狂的制作的Demo ,里面就有SVG的方案。对于Canvas的方案，如果你感兴趣的话，可以看看Underline.js，它也可以实现文本下划线的效果。

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

扩展阅读

大漠

常用昵称“大漠”，W3CPlus创始人，目前就职于手淘。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3的研究，是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3：核心技术与案例实战》。

如需转载，烦请注明出处：https://www.fedev.cn/css/styling-underlines-web.html