::after伪元素默认可拦截鼠标事件，需设pointer-events:none才能穿透；z-index需配合position生效；移动端无:hover，点击反馈须用touchstart监听并确保热区≥44×44px。
::after 伪元素本身不能绑定 click 事件，也不能被 document.querySelector 选中——它不是 DOM 节点，浏览器压根不把它当交互目标。
伪元素默认 pointer-events 是 auto，不是 none
很多人误以为伪元素“天然不可点”，其实恰恰相反：只要它有尺寸、有定位、又盖在可点击元素上，默认就会拦截鼠标事件。Chrome DevTools 的“Layers”面板能清楚看到它参与命中测试（hit testing）。
- 没加
pointer-events: none时，::after就像一层透明胶布——看不见，但点不着底下的按钮 - 加了
pointer-events: none，事件才真正穿透过去，由宿主元素捕获 - 写成
pointer-events: auto !important是自找麻烦，除非你真想锁死拦截行为
z-index 和 position 必须配对生效
z-index 对伪元素无效，除非它本身是定位元素。光写 z-index: -1 没用，必须同时声明 position: absolute 或 relative。
- 宿主元素（比如
.btn）要设position: relative，否则::after的absolute定位会找错参照物 - 如果伪元素需要显示在文字上方（如装饰边框），
z-index: 1+pointer-events: none才能既可见又不挡事 - 用
inset: 0替代top/left/right/bottom: 0更简洁，但老版本 Safari 不支持
移动端的 hover 和点击热区是两回事
伪元素没有独立点击热区，但用户会本能去点箭头、关闭图标这些视觉提示位置。而移动端根本没有 :hover，靠 CSS 无法触发“悬停反馈”。
- 别指望
::after上的:hover在 iPhone 上生效——它只在@media (hover: hover)下才起作用 - 要实现点击反馈，必须监听
touchstart给宿主加 class，再用.host.is-pressed控制样式 - 伪元素的尺寸要足够大（至少 44×44px），否则 iOS 会忽略触摸，这不是 CSS 能解决的
最容易被忽略的是：伪元素是否真的“覆盖了有效点击区域”。热力图或 Chrome 的“Rendering > Paint flashing”能快速验证——如果伪元素区域闪烁但按钮没反应，八成是它在吃事件，而不是 JS 逻辑错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
