CSS伪元素如何正确设置pointer-events

伪元素默认不响应点击，需父元素设pointer-events: none、伪元素设pointer-events: auto，并配合position:relative和显式display才能使其可点击；移动端需真机测试验证。

伪元素默认不响应点击，必须显式控制

伪元素（::before 和 ::after）天生不参与事件捕获——哪怕你给它加了 content、width、height，它也不会接收 click 或 hover。这不是 bug，是规范行为。想让它可点，得靠 pointer-events 手动激活，但不能乱设。

1. 伪元素本身没有 DOM 节点，所以无法直接绑定 JS 事件监听器，pointer-events: auto 是唯一让它成为有效事件目标的方式
2. 父元素若没设 position: relative，伪元素用 absolute 定位会脱离预期位置，导致点击区域错位
3. display 必须显式声明（如 block 或 flex），否则宽高不生效——content: "" 后仍是 inline，不认 width/height

父元素 pointer-events: none 是常见前提

多数场景下，你希望点击伪元素时不触发父元素的事件（比如按钮上叠加关闭图标）。这时不能只给伪元素设 auto，还得让父元素“让出”事件权，否则点击伪元素区域仍会冒泡到父级并触发其 onclick。

1. 父元素设 pointer-events: none，伪元素再设 pointer-events: auto，才能实现「仅伪元素响应」
2. 别漏掉 cursor: pointer，否则用户看不出可点，尤其移动端无 hover 状态
3. 如果父元素本身需要响应部分区域（比如文字内容仍要可点），就不能全局设 none，得改用事件委托 + e.target === pseudoEl 判断

pointer-events: none 放在伪元素上反而会失效

这是最容易踩的坑：有人看到「伪元素要可点」，就顺手给 ::after 加 pointer-events: none，结果发现点不动——因为 none 的作用是「穿透」，不是「启用」。

1. ::after { pointer-events: none } → 点击时事件直接透到下层，伪元素自己收不到
2. 真正需要的是 ::after { pointer-events: auto }，且父元素已设 none，形成「父让权、子接权」关系
3. 若伪元素覆盖了父元素内其他可交互内容（如文字链接），又不想影响它们，得用 z-index 分层或限制伪元素尺寸，避免视觉遮挡引发误点

移动端真机测试不可跳过

iOS Safari 对 pointer-events 的处理比桌面端更敏感，尤其涉及软键盘弹出、touch 事件链时，伪元素可点性容易失效。

1. 在 iOS 上，若伪元素覆盖了 input 或 textarea，即使设了 auto，也可能因底层 focus 逻辑被阻断而无法唤起键盘
2. 安卓部分 WebView（尤其旧版）对 pointer-events: auto 在伪元素上的支持不稳定，建议搭配绝对定位 + z-index 做 fallback
3. 务必用真机点按测试：不仅看视觉反馈，更要确认 click 事件是否真实触发、是否干扰邻近控件

实际生效的关键就三行 CSS：parent { position: relative; pointer-events: none; }、parent::after { content: ""; position: absolute; pointer-events: auto; }，少一个都可能白忙活。伪元素不是节点，但它能当靶子用——前提是把路让清楚，把靶子立稳。