CSS 视觉 - 漂亮的下划线

2019-07-31

描述

一种较好的可选方案为 text-decoration: underline 或 <u></u>， 但是下行字母不能被下划线所裁剪。但可以使用 text-decoration-skip-ink: auto 来进行解决，然而只有少数字母不会超过下划线。

HTML

<p class="pretty-text-underline">Pretty text underline without clipping descending letters.</p>

CSS

body {
  background-color: #f5f6f9;
}
.pretty-text-underline {
  display: inline;
  text-shadow: 1px 1px #f5f6f9, -1px 1px #f5f6f9, -1px -1px #f5f6f9, 1px -1px #f5f6f9;
  background-image: linear-gradient(90deg, currentColor 100%, transparent 100%);
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: 100% 1px;
}
.pretty-text-underline::-moz-selection {
  background-color: rgba(0, 150, 255, 0.3);
  text-shadow: none;
}
.pretty-text-underline::selection {
  background-color: rgba(0, 150, 255, 0.3);
  text-shadow: none;
}

Demo

说明

1. text-shadow 使用带有 4 个偏移的设置来覆盖一个 4x4 的区域，以确保下行字母和下划线的相邻处有一个“浑厚”的阴影。
   使用的颜色需要和背景色保持一致。对于大的字体，需要使用一个更大的 px 尺寸。偏移值要使其能够创建一个均等的、浑厚的阴影，当然也可以使用子像素
2. background-image: linear-gradient(...) 使用文本的颜色创建一个 90 度的渐变（currentColor）
3. background-* 属性设置需要使块的宽度为 100%、高度为 1px，背景位于底部且不能重复。这样就可以在文字下方创建一个 1px 的下划线
4. ::selection 伪选择器的设置可以保证文字在选中后不会被他的阴影所干扰

浏览器支持

支持率：97.5%
支持情况：

• https://caniuse.com/#feat=css-textshadow
• https://caniuse.com/#feat=css-gradients

返回总目录

每天 30 秒系列之 CSS