::before 是纯视觉层的装饰方案，不增加 DOM 节点、不影响语义与可访问性，适合右箭头、角标等静态装饰；需语义或交互时应改用真实元素如 <svg> 或带 aria-label 的 <span>。
::before 不增加 DOM 节点，不参与语义、不被屏幕阅读器读取、也不触发 JS 事件——它天生就是纯视觉层的“画布”，而 <span> 是真实 DOM 元素，一加就多一个可访问节点、多一次渲染计算、多一层维护负担。
伪元素不污染语义结构
当你要加一个右箭头、角标、引号或分隔线时，<span class="icon-arrow"></span> 看似无害，但它会出现在 DOM 树里，被屏幕阅读器尝试解析（哪怕空着），也可能被 JS 误选中。而 ::before 完全绕过 DOM，只在渲染层生成，对语义、SEO、可访问性零干扰。
- 若图标需被读出（如“搜索按钮”旁的放大镜），
::before就不该用——得换<svg>或带aria-label的真实元素 - 用
<span>做装饰，后续想批量隐藏/动画，得写 JS 切 class；::before直接改 CSS 就行 - 服务端渲染或 SSR 页面中，多余
<span>会增大 HTML 体积，::before零传输开销
定位和层叠更可控
::before 默认继承父元素的字体、颜色等，且天然处于父元素的层叠上下文中；而 <span> 是独立节点，要精准对齐图标、角标或下划线，往往得反复调 vertical-align、line-height，甚至加 transform 微调——这些在伪元素上反而更稳定。
- 绝对定位的
::before必须依赖已定位父元素（position: relative），否则会相对视口定位——这是常见飘移原因 -
<span>若设position: absolute，它的定位基准取决于最近已定位祖先，容易失控；::before的定位上下文更明确、更易推导 - 需要“盖在文字上方”的效果（如描边、蒙层），
::after比额外<span>更易控制 z-index 层级
content 是开关，也是安全阀
::before 是否渲染，只由 content 决定：写 content: "" 就创建空盒子，删掉这行就彻底消失；而 <span> 一旦写进 HTML，就得靠 CSS display: none 或 JS 移除，存在样式泄漏或 JS 失效风险。
立即学习“前端免费学习笔记（深入）”；
- 忘了写
content→::before不渲染，但不会报错，排查时容易卡住 - 写了
content: none→ 整条规则被浏览器忽略，不是“隐藏”，是“失效” -
<span>即使空着，仍占 DOM 位置、影响 flex/grid 布局计算（除非显式display: contents）
性能和响应式更轻量
每个 <span> 都要走完整 DOM 构建 → 样式计算 → 布局 → 绘制流程；::before 跳过 DOM 构建，样式变更仅触发布局和绘制，尤其在列表项、卡片流等高频重复场景下差异明显。
- 响应式缩放时，
::before的font-size或transform: scale()可随父元素文字大小自然变化；<span>里的图标若用 px 固定尺寸，就得额外写媒体查询 - 动画场景下，
::before的opacity、transform能走合成层，<span>若未主动提升，可能触发重排 - 伪元素不支持 JS 获取（
getElementsByClassName找不到），反而是优势——避免团队成员误用 JS 操作装饰层
真正容易被忽略的点是：伪元素不是“替代方案”，而是“分层方案”。它只适合那些你确定永远不需要 JS 控制、永远不参与语义、永远不需被辅助技术感知的内容。一旦边界模糊（比如角标数字要动态更新），就得退回到真实元素 + ARIA 的组合——这时候再硬套 ::before，反而埋下可访问性和维护隐患。
