🎶 Sym - 一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)平台

📕 思源笔记 - 一款桌面端笔记应用,支持 Windows、Mac 和 Linux

🎸 Solo - B3log 分布式社区的博客端节点,欢迎加入下一代社区网络

♏ Vditor - 一款浏览器端的 Markdown 编辑器

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%
支持情况:

返回总目录

每天 30 秒系列之 CSS


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

留下你的脚步