::before 和 ::after 仅用于在元素内容前后插入装饰性、非语义的生成内容，必须配合 content 属性（如 ""、"→"、url() 或 attr()）才能生效；适用于轻量装饰与视觉反馈，不可替代真实 DOM 节点。
伪元素 ::before 和 ::after 的核心用途
它们只用于在元素内容的**前侧或后侧插入生成内容**，且这个内容纯属装饰性、非语义性——不能被选中、无法聚焦、不参与可访问性树，也不影响 DOM 结构。
必须配合 content 属性才能生效
没有 content，::before 和 ::after 完全不会渲染。它的值可以是字符串、引号包裹的空格、url() 图片，或者 none/normal（此时不显示）。
-
content: ""是最常用写法，用于创建纯视觉层（比如三角形、边框装饰） -
content: "→"可添加图标符号，但注意：它属于文本内容，会受字体、字号、行高影响 -
content: url(arrow.svg)支持内联 SVG，但不支持设置宽高，需靠width/height或background+padding控制尺寸 -
content: attr(data-label)能读取元素的 HTML 属性值，适合动态标注，但仅限字符串值
常见误用与限制
很多人试图用它们替代真实 DOM 节点，结果踩坑：
- 不能响应鼠标事件（
pointer-events: auto无效），如需点击交互，得套一层真实元素或改用background - 不继承父元素的
font-family，除非显式声明；color也不自动继承，常被忽略导致文字“消失”（其实是黑色字打在黑色背景上） - 在表单控件（如
、）上基本无效，因为这些元素是替换元素，浏览器限制其伪元素渲染 - IE8 只支持单冒号语法
:before，但现代项目通常不再考虑
.icon-btn::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
background: url(icon-check.svg) no-repeat center;
background-size: contain;
margin-right: 8px;
}
真正适合的场景就两类
一是轻量装饰（图标、分隔线、小三角），二是纯视觉反馈（如表单验证状态的红点、必填星号）。别让它承担结构责任，也别指望它能替代 JS 动态插入内容——该用真实元素的时候，就老老实实写 。
立即学习“前端免费学习笔记（深入）”；
