伪元素不在DOM树中，JS无法直接操作；只能通过getComputedStyle读取样式，交互需绑定父元素并结合坐标判断或pointer-events: none实现。
伪元素不在DOM树中，JS根本“看不见”它
浏览器渲染时，::before 和 ::after 是 CSS 引擎在样式层动态生成的视觉内容，它们不参与 HTML 解析，也不被插入到 DOM 树里。这意味着：document.querySelector('.box::after') 返回 null，$('.box::after') 查不到任何元素，element.addEventListener('click', ...) 更无从谈起——目标都不存在。
常见错误现象：你以为绑上了，其实没生效
以下写法全部无效，但开发者常误以为能用：
-
$('.target::after').on('click', handler)—— jQuery 选择器只查 DOM 节点，伪元素不是节点 -
element.addEventListener('click', ...)绑在父元素上，却期望event.target是伪元素 —— 实际event.target永远是父元素本身 - 给伪元素设
z-index却发现点击仍穿不过去 —— 很可能上层有透明遮罩（比如另一个::before）拦截了事件，而不是伪元素“自己响应不了”
能读不能写：getComputedStyle 是唯一合法接口
虽然不能绑定事件、不能修改结构，但你可以安全地读取伪元素的计算样式：
const el = document.querySelector('.target');
const afterStyle = window.getComputedStyle(el, '::after');
console.log(afterStyle.getPropertyValue('content')); // '"提示文字"'
console.log(afterStyle.content); // 同上，部分浏览器支持属性访问
注意两点：
-
window.getComputedStyle(el, '::after')第二个参数必须是字符串'::after'或':after'，不能漏掉冒号 - 返回的是只读的
CSSStyleDeclaration，无法调用setProperty修改；想改样式只能换类名、切内联 style、或动态注入
真正可行的交互方案只有这几种
所有“给伪元素加点击”的需求，最终都得退回到父元素上处理：
- 把点击事件绑定在父元素，再通过
event.clientX/Y与伪元素的getBoundingClientRect()做坐标比对（适合精确定位，比如点击角标） - 直接把整个父元素设为可点击区域，视觉上伪元素就是它的“一部分”（最常用，如带
::after图标的按钮） - 用
data-属性驱动伪元素内容，再监听父元素事件 + 判断dataset状态（例如data-status="active"控制content: attr(data-status)） - 若伪元素只是装饰性遮罩（比如半透明蒙层），加
pointer-events: none让点击穿透到底层真实可操作元素
伪元素的本质是“渲染产物”，不是“交互载体”。想让它参与用户操作，就得承认它没有 DOM 身份，并围绕这个前提设计交互逻辑——绕开它，而不是强行拉它进事件流。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
