伪元素默认不响应点击，需父元素设pointer-events: none、伪元素设pointer-events: auto，并配合position:relative和显式display才能使其可点击；移动端需真机测试验证。
伪元素默认不响应点击，必须显式控制
伪元素（::before 和 ::after）天生不参与事件捕获——哪怕你给它加了 content、width、height，它也不会接收 click 或 hover。这不是 bug，是规范行为。想让它可点，得靠 pointer-events 手动激活，但不能乱设。
- 伪元素本身没有 DOM 节点，所以无法直接绑定 JS 事件监听器，
pointer-events: auto是唯一让它成为有效事件目标的方式 - 父元素若没设
position: relative，伪元素用absolute定位会脱离预期位置，导致点击区域错位 -
display必须显式声明（如block或flex），否则宽高不生效——content: ""后仍是 inline，不认width/height
父元素 pointer-events: none 是常见前提
多数场景下，你希望点击伪元素时不触发父元素的事件（比如按钮上叠加关闭图标）。这时不能只给伪元素设 auto，还得让父元素“让出”事件权，否则点击伪元素区域仍会冒泡到父级并触发其 onclick。
- 父元素设
pointer-events: none，伪元素再设pointer-events: auto，才能实现「仅伪元素响应」 - 别漏掉
cursor: pointer，否则用户看不出可点，尤其移动端无 hover 状态 - 如果父元素本身需要响应部分区域（比如文字内容仍要可点），就不能全局设
none，得改用事件委托 +e.target === pseudoEl判断
pointer-events: none 放在伪元素上反而会失效
这是最容易踩的坑：有人看到「伪元素要可点」，就顺手给 ::after 加 pointer-events: none，结果发现点不动——因为 none 的作用是「穿透」，不是「启用」。
-
::after { pointer-events: none }→ 点击时事件直接透到下层，伪元素自己收不到 - 真正需要的是
::after { pointer-events: auto }，且父元素已设none，形成「父让权、子接权」关系 - 若伪元素覆盖了父元素内其他可交互内容（如文字链接），又不想影响它们，得用
z-index分层或限制伪元素尺寸，避免视觉遮挡引发误点
移动端真机测试不可跳过
iOS Safari 对 pointer-events 的处理比桌面端更敏感，尤其涉及软键盘弹出、touch 事件链时，伪元素可点性容易失效。
- 在 iOS 上，若伪元素覆盖了
input或textarea，即使设了auto，也可能因底层 focus 逻辑被阻断而无法唤起键盘 - 安卓部分 WebView（尤其旧版）对
pointer-events: auto在伪元素上的支持不稳定，建议搭配绝对定位 +z-index做 fallback - 务必用真机点按测试：不仅看视觉反馈，更要确认
click事件是否真实触发、是否干扰邻近控件
parent { position: relative; pointer-events: none; }、parent::after { content: ""; position: absolute; pointer-events: auto; }，少一个都可能白忙活。伪元素不是节点，但它能当靶子用——前提是把路让清楚，把靶子立稳。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
