伪元素默认pointer-events: auto，会拦截点击；必须显式设pointer-events: none，且需确保其尺寸定位准确、不被父容器overflow裁剪，并配合touch-action: manipulation消除移动端300ms延迟。

伪元素默认会拦截点击事件，只要它视觉上覆盖了按钮，用户点上去就可能没反应——不是按钮坏了，是伪元素“挡枪”了。

为什么::before/::after会让按钮点不动

伪元素默认 pointer-events: auto，哪怕它只是个装饰性遮罩或波纹动画，只要渲染出来且定位覆盖了按钮区域，就会在事件捕获阶段截住 click、touchstart。常见现象包括：按钮中心点不了、只边缘响应、热力图显示点击落点和触发点不重合。

• 没写 content: "" → 伪元素根本不渲染，但你可能误以为它“不存在”，实际是其他样式（比如背景、边框）在干扰
• 写了 content: "" 但没设 position: absolute → 它按 inline 布局流排，尺寸不可控，覆盖范围 unpredictable
• 设了 position: absolute 但父元素没 position: relative → 伪元素脱标到 body 或某个意外祖先，热区飘移

必须加 pointer-events: none 的三个位置

不是加一次就完事。要确保点击穿透到底层按钮，这三个地方得同时检查：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 伪元素本身必须显式写 pointer-events: none —— 默认值不是 none，别依赖“没写就是没效果”
• 如果伪元素嵌套在带 pointer-events: none 的容器里（比如模态框遮罩），它继承后即使设 auto 也无效，得把交互控件（如关闭按钮）移出该容器
• 移动端真机测试时，iOS Safari 对 pointer-events: none 下的 input 聚焦支持不稳定，若伪元素盖住了表单控件，不能只靠 none 解决，得用 z-index 分层或 Portal 渲染

伪元素尺寸与定位怎么写才不遮挡

尺寸写错，等于白设 pointer-events: none —— 因为浏览器仍会做命中测试，哪怕它“不可点”，只要盒模型占位错误，就可能干扰 layout 或触发意外层叠。

• 用 inset: -8px 比 top: -8px; left: -8px; width: calc(100% + 16px); height: calc(100% + 16px) 更可靠，避免某些 Android WebView 对百分比计算偏差
• 不要用 width: 200%; height: 200% 配合 transform: translate(-50%, -50%) 居中波纹 —— 这种写法在部分旧版 Safari 中会导致点击坐标偏移
• 如果父容器有 overflow: hidden，扩出去的部分会被裁掉，此时 pointer-events: none 依然生效，但用户根本点不到那块区域，得同步调大父容器或换 clip-path

真实按钮上别漏 touch-action: manipulation

伪元素扩展热区后，移动端仍有约 300ms 点击延迟。这不是伪元素的问题，但容易被归咎于它——实际上，touch-action: manipulation 必须加在真实可点击元素（如 <button></button>）上，才能让扩展出的热区响应更跟手。

• 加在伪元素上无效，浏览器直接忽略
• 加在父容器上没用，事件目标不是它
• 配合 pointer-events: none 使用时，注意：若按钮同时监听 touchstart 和 click，需防重复触发，建议统一用 click 或用 preventDefault() 控制

最容易被忽略的是：多个绝对定位伪元素堆叠时，pointer-events: none 的穿透顺序不按 DOM 顺序，而是按层叠上下文深度。真机测不出问题，不代表线上没问题——尤其当页面有动态插入的弹窗、Tooltip 或广告浮层时。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！