伪元素不是DOM节点，仅是CSS渲染指令；它不参与HTML解析、不进入DOM树、不可被querySelector选中，也无法响应事件或无障碍访问，仅用于视觉修饰。
伪元素根本不是 DOM 节点，它只是渲染指令
因为浏览器规范里就没有“插入 DOM”这回事——::before 和 ::after 是 CSS 渲染引擎在绘制阶段临时构造的抽象盒子，不参与 HTML 解析、不进入 DOM 树、不触发 DOM 构造流程。你写 content: "✓"，浏览器不会创建一个文本节点，只是在布局后把这串字符画到指定位置。
常见错误现象：
-
document.querySelector('.item::after')直接抛出SyntaxError: Failed to execute 'querySelector' on 'Document': ' -
el.appendChild(document.createElement('span'))无法影响伪元素内容 - 用
innerHTML或textContent修改宿主元素，伪元素内容照常显示，毫无反应
为什么 getComputedStyle 可以读取，但 querySelector 不行
window.getComputedStyle(el, '::after') 能拿到样式，是因为它查的是渲染层的计算结果，而非 DOM 结构；而 querySelector、getElementById 等 API 只操作真实 DOM 节点，压根不处理 CSS 渲染时虚构出来的部分。
关键区别：
立即学习“前端免费学习笔记（深入）”；
-
getComputedStyle的第二个参数是字符串':after'，它只是个提示，告诉浏览器“请返回这个伪元素对应的样式快照” - 这个调用不返回节点，只返回
CSSStyleDeclaration对象，里面没有nodeType、没有parentNode、不能addEventListener - 想用 JS 动态改伪元素内容？不行。能改的只有宿主元素的
data-属性，再靠content: attr(data-tip)间接驱动
想让内容可交互、可选中、可聚焦，必须用真 DOM
伪元素的 content 永远不会出现在 getSelection() 结果里，也不会被屏幕阅读器读出，更不会响应 tab 键聚焦。这不是兼容性问题，是设计使然。
替代方案要明确：
- 把
content: "×"改成真实<button class="close-btn">×</button> - 动态徽章用 JS 创建
span并el.appendChild(badge)，而不是依赖attr(data-status) - 若为减少模板冗余，可用
data-属性标记意图，由初始化脚本批量生成对应 DOM 元素
容易忽略的边界：伪元素没有事件捕获路径，也没有无障碍树入口
哪怕你给 ::after 设置了 cursor: pointer 和 position: absolute，点击时 e.target 永远是宿主元素。它不进事件流，不进 document.ariaHidden 判断逻辑，也不出现在 Accessibility Inspector 中。
真正要解决的不是“怎么塞进 DOM”，而是“这个视觉块是否本该承载语义或交互”。如果答案是肯定的，那就别用伪元素——它从出生起就只负责“看起来像”，不负责“是什么”或“能干什么”。
