伪元素::before默认拦截点击事件，即使仅含1px边框或content: ""；需对其单独设置pointer-events: none来解耦事件，而非父元素；验证是否真被遮挡应通过DevTools检查高亮节点及伪元素渲染状态。
伪元素::before默认会拦截点击事件
哪怕它只画了一条 1px 边框、一个半透明阴影，或只是 content: "" 配了 background-color，::before 一旦渲染出来，就默认参与鼠标/触控事件流——它不是“看不见的装饰”，而是实实在在的事件目标。浏览器不会因为它没文字内容就跳过它去捕获下层文本。
给::before加pointer-events: none是最直接解法
别在父元素上设 pointer-events: none，那会把整个容器（包括里面可点的按钮、链接）都禁用掉。必须精准作用于伪元素本身：
.text-container::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: linear-gradient(90deg, rgba(255,255,255,0.8), transparent);
pointer-events: none; /* ✅ 关键：只关掉它自己的事件 */
}-
pointer-events: none不影响视觉渲染，也不触发重排，纯粹切断事件捕获链 - 若伪元素里有需要交互的子内容（比如关闭图标），得单独给那个子元素设
pointer-events: auto - 安卓旧版 WebView 对该属性支持不稳定，遇到
input[type="file"]或select穿透失败时，需配合 JS 临时移除伪元素
排查是否真被::before遮挡
别凭感觉加样式。打开 DevTools，右键点击无法响应的文本区域 → “检查”，看高亮框落在哪个节点上。如果跳转到的是 ::before 所在的元素（即使它没显式 DOM 节点），基本就是它在吃点击。
- 临时给可疑父级加
outline: 2px solid red，确认热区是否被伪元素实际覆盖 - 在 Elements 面板勾选 “Show pseudo-elements”，强制展开
::before查看 computed 样式里的content值和pointer-events - 注意父级是否创建了新层叠上下文（如含
transform、opacity: 0.99、will-change: transform），这会让z-index: -1在伪元素上完全失效
伪元素不显示？先看content有没有生效
很多“遮挡”其实是错觉——::before 根本没渲染出来，但开发者误以为它存在。它必须满足两个硬条件才生成：
立即学习“前端免费学习笔记（深入）”；
-
content属性必须显式声明，且值合法：content: ""、content: "•"、content: url(...)都行；content: none或漏写则直接忽略整条规则 - 若用了
position: absolute，要确认top/left没让它跑出视口，或被父级overflow: hidden裁掉（临时改overflow: visible验证） - 伪元素默认
display: inline，无宽高、无背景、无边框时“存在但不可见”，加display: block和background: red是最快验证手段
真正容易被忽略的是：伪元素的事件拦截行为与它的视觉可见性无关。哪怕你用 opacity: 0 或 visibility: hidden 把它藏起来，它依然吃点击；只有 display: none 或 pointer-events: none 才能释放事件流。
