伪元素（::before/::after）可不改HTML添加装饰，需设content及display等属性；支持绝对定位角标、双边框、背景叠加；注意不影响布局、可访问性及鼠标事件。
不改 HTML 结构，也能给元素加装饰——伪元素（::before 和 ::after）就是最常用、最干净的方案。
用 ::before 或 ::after 添加小图标或分隔符
比如在导航菜单文字前加一个圆点，或标题后加一条短横线，都不需要额外写 <span></span> 标签。
关键点：伪元素默认是行内级，要显示必须设置 content（哪怕只写 content: ""），并根据需要设定 display、尺寸和定位。
- 加小圆点：.nav-item::before { content: "•"; margin-right: 8px; }
- 标题下划线：h2::after { content: ""; display: block; width: 40px; height: 2px; background: #333; margin-top: 8px; }
用绝对定位做「贴边装饰」
当想在按钮右上角加个红色小角标、或卡片左下角加个标签，又不想动 HTML，伪元素配合 position: absolute 就很合适。
立即学习“前端免费学习笔记（深入）”；
前提是父容器设 position: relative，否则绝对定位会相对于最近的定位祖先，容易跑偏。
- 按钮角标：.btn { position: relative; } .btn::after { content: "NEW"; position: absolute; top: -6px; right: -6px; background: #f00; color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 2px; }
- 注意：别忘了给伪元素设
z-index，避免被内容遮住
用伪元素模拟边框、阴影或渐变背景
有些视觉效果用纯 CSS 边框或 box-shadow 不够灵活，比如双色边框、不规则投影、或叠加一层半透明蒙版，这时可以多用一个伪元素层。
- 双色边框：.card::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; border: 2px solid #007bff; z-index: -1; } .card::after { content: ""; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px; border: 2px solid #6c757d; z-index: -2; }
- 背景叠加：.hero::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)); z-index: 1; }（再把真实内容设
z-index: 2）
注意事项：别让伪元素影响布局或可访问性
伪元素默认不参与文档流，但若设了 display: block 又没控制好尺寸，可能意外撑开高度；更重要的是，它们不会被屏幕阅读器读出，所以不能用来传递关键信息。
- 纯装饰性内容，放心用；含语义的内容（如“必填”、“警告”），仍需写进 HTML
- 用
pointer-events: none避免伪元素拦截鼠标事件 - 动画时优先对伪元素加
transform，性能比直接改left/top更好
