伪元素默认不拦截点击事件，但因属于独立渲染图层，若覆盖内容且未设pointer-events: none，便会阻挡点击；解决方法是为其显式设置pointer-events: none，注意IE11不支持需降级处理。
伪元素默认会拦截点击事件吗
不会。但::before和::after在渲染层属于“真实存在的图层”，只要它覆盖了下方内容、且自身没有设置pointer-events: none，浏览器就会把它当作可交互区域的一部分——哪怕它只是个空的装饰块，也会吃掉鼠标事件。
怎么让伪元素不阻挡点击
核心就一条：给伪元素加pointer-events: none。但要注意几个关键点：
- 必须显式写在伪元素规则里，父元素设了没用
- 如果伪元素里有子内容（比如你用
content: "▶"生成符号），它本身仍不可点击——pointer-events: none只让它“透传”事件，不赋予它交互能力 - IE11 不支持
pointer-events在伪元素上生效，需要降级方案（见下一条）
示例：
.btn::before {
content: ">";
position: absolute;
left: -20px;
pointer-events: none; /* 关键 */
}IE11兼容：不用pointer-events怎么办
IE11对伪元素的pointer-events支持不可靠，稳妥做法是换思路：把伪元素的定位逻辑改掉，让它不盖在可点击区域上。
立即学习“前端免费学习笔记（深入）”；
- 优先用
margin或transform外推，而不是position: absolute硬盖 - 如果必须用绝对定位，确保
z-index低于内容层，或用z-index: -1（注意：这会让它退到父容器背景之下，需确认父元素不是overflow: hidden） - 极端情况可考虑用真实DOM节点替代伪元素，控制权更明确
为什么有时候加了pointer-events: none还是点不动
常见原因不是伪元素本身，而是它暴露了底层问题：
- 父容器设置了
pointer-events: none（整棵树都被禁用了） - 伪元素用了
position: absolute但没设top/left，意外塌陷到内容上方 - CSS层叠上下文导致z轴顺序错乱（比如父元素有
transform或opacity < 1，创建了新层叠上下文） - 伪元素的
content为空字符串但占了空间（如content: ""+width/height），视觉不可见但事件区仍在
调试时直接用浏览器开发者工具选中伪元素，看“Computed”面板里的pointer-events是否真的生效，比猜更可靠。
伪元素是否挡点击，本质是渲染树和事件捕获路径的交集问题——看起来是个样式开关，背后连着布局、层叠、事件分发三套机制。调的时候别只盯一个属性。
