CSS SNIPPET

  返回

美观的文本下划线  视觉效果

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
.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;
}
效果演示

Pretty text underline without clipping descending letters.

代码说明
  1. text-shadow 使用4个值覆盖4x4的区域来确保下划线有“厚”阴影,当下行字幕 交叉时可以遮住下划线。使用匹配背景的颜色。对于较大的字体,使用较大的 px。 额外的值可以创建更厚的阴影,也可以使用子像素值。
  2. background-image: linear-gradient(...) 使用文本颜色(currentColor)创建一个90deg的渐变。
  3. background-* 属性设置渐变为块宽度的 100% ,高度为1px,禁止重复,创建文本 下方的1px下划线。
  4. ::selection 伪类规则确保文本阴影不会影响文本选中操作。
浏览器支持

100.0%