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 的三角技巧 + 绝对定位，零图片实现对话框小三角、下拉指示箭头等。