如何移除body的::before伪元素 解决Web应用无法交互问题

你在自身项目CSS中搜不到对应规则，说明这段样式不是手写的业务代码，按以下优先级排查即可：

• 首先定位样式来源：打开浏览器开发者工具，在Elements面板选中<body>标签，在右侧Styles面板找到你贴出的body:before规则，看规则右上角标注的文件来源地址：
  • 如果地址是chrome-extension://、edge-extension://、moz-extension://开头，说明是浏览器扩展注入的样式，常见于深色模式、网页美化、广告拦截类扩展，禁用对应扩展、或者把本地开发域名加入扩展白名单即可解决。
  • 如果地址是项目内的node_modules依赖文件、或者引入的模板主题文件，说明是第三方依赖自带的全局样式：这类样式通常是模板自带的页面加载遮罩，大概率是页面初始化的JS逻辑异常，没有在加载完成后移除遮罩，才会一直挡住交互。
  • 如果标注的是inspector stylesheet，说明是之前调试时在开发者工具里手动给body加的临时样式，清掉即可。
• 临时调试移除方案：控制台执行以下代码即可暂时去掉遮罩，验证页面交互是否正常：

const tempStyle = document.createElement('style');
tempStyle.textContent = 'body::before { display: none !important; }';
document.head.appendChild(tempStyle);

• 永久修复方案：
  1. 第三方依赖导致的问题：优先查对应依赖的配置项，关闭默认的全局加载遮罩；如果没有配置项，直接在自己项目的全局CSS文件里加权重更高的覆盖规则即可：

  body::before {
    display: none !important;
  }
  

  如果业务逻辑确实需要这个遮罩层，只是挡住了交互，可以把页面所有可交互元素的父容器设置position: relative; z-index: 2;，让交互层层级高于遮罩即可。
  2. 浏览器扩展导致的问题：开发环境下关闭对应扩展，或者配置扩展不作用于本地开发域名，避免后续调试被注入样式干扰。

内容的提问来源于stack exchange，提问作者ZAIN DURANI