::before和::after伪元素需配合content属性使用，可在不修改HTML情况下插入内容或装饰，常通过定位实现视觉效果，并应关注性能与可访问性。
CSS 选择器可以通过为元素添加 ::before 和 ::after 伪元素，在不修改 HTML 的情况下插入内容或装饰性元素。这两个伪类不会影响文档流中的结构，但会在渲染层面对元素进行扩展。
基本语法与 content 属性
要使 ::before 和 ::after 生效，必须设置 content 属性，即使为空字符串也需声明。否则伪元素不会被渲染。
.element::before {
content: ""; /* 必须存在 */
display: block;
width: 10px;
height: 10px;
background: red;
}
content 可以是：
- 纯文本（如 "添加文字"）
- 空字符串（用于装饰图形）
- 引用属性值（如 attr(data-tip)）
- Unicode 字符（如 "\2713" 表示对勾）
- 计数器（结合 counter-increment 使用）
定位与布局控制
伪元素默认是行内元素，常配合 position 使用来实现图标、箭头、装饰线等视觉效果。
立即学习“前端免费学习笔记（深入）”；
常见做法是将目标元素设为 relative，伪元素设为 absolute。
.tooltip::after {
content: attr(data-tip);
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
background: #333;
color: white;
padding: 4px 8px;
border-radius: 4px;
white-space: nowrap;
}
结合其他选择器增强灵活性
你可以将伪类与其他选择器组合使用，比如类名、属性选择器、状态伪类等。
- .btn:hover::after：鼠标悬停时显示提示
- input:focus::before：聚焦输入框前加图标
- [data-status="ok"]::after：根据属性值添加标记
注意：由于伪元素不属于 DOM 节点，不能通过 JavaScript 直接操作，但可通过切换类名间接控制其显示。
性能与可访问性建议
虽然 ::before 和 ::after 很方便，但也需注意：
- 避免滥用，过多伪元素可能影响渲染性能
- 插入的文本若为重要信息，应确保可被屏幕阅读器识别（有时需用 aria-label 替代）
- 不要用伪元素承载关键交互功能
基本上就这些。只要记得写 content，合理使用定位和样式，::before 和 ::after 就能安全有效地扩展元素表现力。
