伪元素遮罩必须设content才能渲染，且父容器需有定位上下文；标准写法为content: ""和position: relative；四边归零或宽高100%确保覆盖，z-index和pointer-events按需设置。
伪元素遮罩必须设 content 才能渲染
不写 content，::before 就是空节点，CSS 完全不绘制，再怎么设 position: absolute 也没用——这是最常卡住人的第一步。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
content可以是空字符串：content: ""，这是遮罩场景的标准写法 - 千万别写
content: none或直接省略——两者效果一样：啥都不显示 - 如果需要兼容老 IE（已极少见），
content: " "（空格）更稳妥，但现代项目用""即可
position: absolute 需要父容器有定位上下文
伪元素设了 position: absolute，但没覆盖整个父元素？大概率是父元素没设 position: relative（或 absolute/fixed），导致它去往上层定位上下文找，最终相对 body 定位，位置完全失控。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给父元素加
position: relative，这是最轻量、最可控的方案 - 不要依赖
display: block或width: 100%来“撑开”伪元素——绝对定位下，宽高默认为内容尺寸，不是父容器尺寸 - 若父元素本身是
inline元素（如<span>），需先设display: inline-block或block，否则width/height不生效
覆盖全区域的关键尺寸写法
只写 top: 0; left: 0 不够，伪元素默认宽高为 0，得显式拉满。而且要注意 z-index 是否被其他层挡住。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 四边归零是最稳写法：
top: 0; right: 0; bottom: 0; left: 0 - 或者用
width: 100%; height: 100%，但前提是父元素尺寸明确（比如有固定高，或min-height） - 遮罩要压住子内容？确保伪元素的
z-index大于子元素；若子元素也有z-index，则伪元素也得设（且值更大），不能只靠文档流顺序 - 避免用
inset: 0——虽然语义清晰，但 Safari 旧版本（≤15.4）不支持
遮罩透明度与 pointer-events 的配合
加了遮罩却发现点不到底下的按钮或链接？或者半透明遮罩下文字看不清？这两个问题本质都是样式叠加逻辑没理清。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
background-color: rgba(0, 0, 0, 0.5)控制遮罩灰度，别用opacity——后者会把整个伪元素（含子内容）都变透明，而伪元素本不该有子内容 - 如果遮罩只是视觉层，不拦截点击，加
pointer-events: none；如果要拦截所有交互（比如模态框遮罩），保持默认或显式写pointer-events: auto - 父元素若有
overflow: hidden，且伪元素超出父盒（比如用了transform移动），可能被裁剪——遮罩失效往往卡在这一步
真正容易漏的是父元素的 position 和伪元素的 content，这两项缺一不可；其余都是尺寸和层级的微调。写完立刻检查 computed styles 里的 offsetWidth 和 offsetHeight，是 0 就说明还没渲染出来。
