CSS 伪元素 ::before / ::after 的 20 个实用技巧

学完这篇，你能把 ::before / ::after 从「知道有这回事」变成「随手就能用」，覆盖形状、文字、动效到避坑的 20 个具体写法。

第一步：先把基础规则弄清（技巧 1-4）

技巧 1：content 不能省。 伪元素默认不渲染，必须写 content，内容为空也要写 content: "";。这是新手 90% 的「为什么没效果」原因。

技巧 2：单冒号和双冒号都行，但建议用双冒号。 :before 是 CSS2 语法，::before 是 CSS3 语法，浏览器两者都认。双冒号能一眼区分「伪元素」和「:hover 这类伪类」。

技巧 3：它默认是 inline。 想设宽高，必须先 display: block 或 display: inline-block，否则 width / height 直接被忽略。

.badge::after {
  content: "";
  display: inline-block;  /* 关键 */
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

技巧 4：对 img、input 这类替换元素无效。 想在图片上加角标，得把图片包一层父元素，把伪元素挂到父元素上。

注意：一个元素最多只有一对伪元素，::before 和 ::after 各一个。想要第三层装饰，只能再加一个包裹元素。

第二步：布局与形状（技巧 5-9）

技巧 5：清除浮动。 老项目里最经典的用法，父元素加一条规则即可，不用额外加空 div。

.clearfix::after { content: ""; display: block; clear: both; }

技巧 6：画三角形。 宽高设 0，只留一边 border，是最省流量的图标方案。

.arrow::after {
  content: "";
  border: 6px solid transparent;
  border-top-color: #333;
}

技巧 7：做卡片遮罩层。 父元素 position: relative，伪元素 position: absolute; inset: 0; 铺满整块，用来压暗背景或承接 hover 效果。

技巧 8：做竖线分隔符。 导航菜单之间的那条细线，用 ::after 加 border-right 比给每个 li 加边框更干净，最后一个用 :last-child::after { display: none; } 去掉。

技巧 9：时间轴小圆点。 列表项加 ::before 定位到左侧，画圆点加竖线，一条时间轴不用任何图片。

第三步：内容与文本装饰（技巧 10-13）

技巧 10：必填项星号。

.required::after { content: " *"; color: #e33; }

技巧 11：自动加引号。 用 content: open-quote 和 close-quote，引号样式跟随语言自动变，中文引号会变成「」，英文是 " "。

技巧 12：自动编号。 配合计数器，列表序号不用手写。

.list { counter-reset: item; }
.list li::before {
  counter-increment: item;
  content: counter(item) ". ";
}

技巧 13：用 attr() 读元素属性。 content: attr(data-tip); 可以把 HTML 属性直接渲染出来，不用改 JS。

注意：content 里不能插入 HTML 标签，写 <br> 也会被当成纯文本显示出来。

第四步：交互与动效（技巧 14-18）

技巧 14：纯 CSS 提示气泡（tooltip）。 元素写 data-tip，hover 时 ::after 显示 attr(data-tip)，配上小三角就是完整气泡。

技巧 15：下划线滑入动画。 链接的 ::after 设 width: 0 加 transition，hover 时 width: 100%，比 text-decoration 好看得多。

技巧 16：图片 hover 蒙层。 蒙层初始 opacity: 0，transition: .3s，hover 时 opacity: 1 并显示「查看」文字。

技巧 17：自定义复选框。 原生 input 设 appearance: none，用 ::before 画对勾，比换图标图省事。

技巧 18：加载动画。 一个圆环 + border-top-color 变色 + animation: spin 1s linear infinite;，十行搞定。

第五步：进阶避坑（技巧 19-20）

技巧 19：层级问题。 伪元素默认跟随父元素层级，父元素若被别的元素盖住，伪元素也跟着被盖。用负 z-index 时，父元素记得加 position: relative 和 z-index: 0，否则会掉到 body 后面去。

技巧 20：无障碍与打印。 纯装饰的伪元素建议加 aria-hidden="true" 或在 CSS 里屏蔽；另外搜索引擎会读到 content 的文字，别把关键词硬塞进去。打印样式里如果不需要装饰，加一段 @media print { .deco::after { display: none; } }。

注意：伪元素的内容不参与 DOM 复制，用户选中文字时带不走，重要信息不要只放在 content 里。

小结

• content 必写，空内容也要写 content: "";
• 设宽高前先 display: block 或 inline-block
• 替换元素（img、input）上挂伪元素无效，要包父元素
• 形状类：三角形、遮罩、分隔线、时间轴圆点
• 内容类：星号、引号、计数器、attr()
• 动效类：tooltip、下划线、蒙层、自绘复选框、加载圈
• 层级、无障碍、打印样式是最后必须检查的三件事