CSS伪元素before和after常见用途有哪些具体应用场景？

本文共计919个文字，预计阅读时间需要4分钟。

before: 在指定元素内容之前插入内容。after: 在指定元素内容之后插入内容。必须使用 `` 标签包裹 `content` 才能生效，否则内容将完全不可见。这是90%初学者第一次写不出来的基本原因。

添加装饰性图标或符号

适合在按钮、链接、标题旁加小箭头、星号、外部链接图标等，不污染 HTML 结构。

• content 可用纯文本（"→"）、Unicode（"\00A9" 表示 ©）、或 attr(data-icon) 动态读取属性值
• 伪元素默认是 display: inline，若需宽高/定位，必须显式设为 block 或 inline-block
• 注意：用 Unicode 时推荐转义写法（如 \2714 ✄），避免文件编码不一致导致乱码

.btn::before { content: "→"; display: inline-block; margin-right: 8px; vertical-align: middle; }

构建纯 CSS 图形（三角、气泡箭头）

利用 border 的三角技巧 + 绝对定位，零图片实现对话框小三角、下拉指示箭头等。

• 核心原理：把一个 width: 0; height: 0 元素的三边设为 transparent，剩下一侧设颜色，就形成三角
• 气泡提示中，通常 ::before 做背景框，::after 做三角，两者都需 position: absolute 并共用 top/left 定位基准
• 三角位置偏移常用 margin-left: -5px（半宽）居中，而非靠 transform，更稳定

.tooltip::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border: 5px solid transparent; border-top-color: #333; }

清除浮动（.clearfix）

虽然 Flex/Grid 已成主流，但遇到老项目或内联块布局时，仍需靠 ::after 解决父容器高度塌陷问题。

立即学习“前端免费学习笔记（深入）”；

• 关键三要素：content: "" + display: block + clear: both
• 不能用 ::before 替代——它插在内容最前，无法撑开底部；::after 插在最后，才能真正“清”掉浮动流
• 现代写法可省略 display: table 等兼容旧版 hack，仅保留上述三行即可覆盖 IE8+

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

自动添加引号或修饰文本

语义化处理引用类内容（如 <blockquote>、<q>），避免手动写 " 破坏可维护性。

• 推荐用 open-quote / close-quote 而非硬编码引号，支持多语言引号规则（如中文用「」，英文用 “”）
• 必须给宿主元素加 position: relative，否则 ::before/::after 的绝对定位会相对于视口定位
• 不要用它放有语义的内容（比如关键说明文字）——屏幕阅读器通常忽略伪元素，且无法被复制选中

blockquote { position: relative; quotes: "“" "”" "‘" "’"; } blockquote::before { content: open-quote; } blockquote::after { content: close-quote; }

真正难的不是写出来，而是记住：所有效果都依赖 content 存在；所有定位都依赖宿主元素有 position 上下文；所有图形都靠 border 或 transform 的像素级控制——漏掉任意一环，伪元素就“隐身”了。