伪元素默认拦截点击因其pointer-events为auto而非none，需显式设pointer-events: auto才可点，设none则穿透至宿主；定位与尺寸不足会导致热区失效。
伪元素默认会拦截点击，不是“不可点”而是“太能点”
很多人以为 ::after 或 ::before 天然不响应点击，其实恰恰相反：只要它有尺寸、有定位、视觉上盖住了可点击区域，默认就会吃掉 click、hover 甚至 contextmenu。Chrome 的 “Layers” 面板里能看到它参与命中测试（hit testing），就像一层看不见的胶布——点不着底下的按钮，不是 JS 没绑对，是它先截胡了。
根本原因在于：::after 的 pointer-events 默认值是 auto，不是 none。它不是 DOM 节点，不能被 document.querySelector 选中，也不能直接绑定事件，但它的事件捕获能力一点不弱。
让伪元素“可点”：必须显式设 pointer-events: auto
想让箭头图标、关闭叉号这类语义明确的伪元素响应点击，得主动告诉浏览器：“这里要收事件”。仅靠 cursor: pointer 不够，必须加：
.btn::after {
content: '\2715';
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
pointer-events: auto; /* 关键：恢复事件捕获 */
}
-
pointer-events: auto是显式声明，不能依赖继承——伪元素没有父级可继承 - 必须配合
position: absolute（或relative/fixed），否则层叠上下文错乱，z-index 无效 - 宿主元素（比如
.btn）最好也设position: relative，确保伪元素定位参照正确
让伪元素“不挡事”：穿透到宿主元素用 pointer-events: none
更多时候你并不想让伪元素自己响应点击，只是用它画个装饰边框、下划线或小图标，但又不希望它干扰宿主按钮的点击。这时要反向操作：
.link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: #007bff;
pointer-events: none; /* 关键：事件穿透到底层 .link */
}
-
pointer-events: none必须加在伪元素自身上，加在宿主元素上没用 - 加了之后，
:hover和:active伪类在伪元素上失效——这不是 bug，是机制使然 - 如果宿主需要 hover 反馈，样式得写在宿主选择器里，比如
.link:hover::after，而不是指望伪元素自己触发
移动端点击热区和伪元素尺寸必须达标
iOS 对触摸目标有硬性要求：小于 44×44px 的区域可能被系统忽略，哪怕 CSS 看起来很大。伪元素没有独立 DOM 节点，它的点击热区完全依赖渲染出的实际像素尺寸。
常见坑：
- 只设
font-size: 12px画个箭头，实际点击区域远小于 44px，iPhone 上点不中 - 用
transform: scale(0.5)缩小伪元素，视觉变小，但 hit-testing 仍按原始尺寸算——结果是热区错位 - 没给伪元素设
position+inset或top/left，导致它塌缩成 0×0，彻底不可点
验证方法很简单：打开 Chrome DevTools → Rendering → Paint flashing，点击时看伪元素区域是否闪烁；如果不闪，说明它压根没参与绘制，更别说响应事件了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
