::before 和 ::after 必须设置 content 才生效，否则不可见；适用于添加装饰图标、纯CSS图形、清除浮动及自动引号等场景，且需注意定位上下文与 display 设置。
::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 的像素级控制——漏掉任意一环，伪元素就“隐身”了。
