根本原因是content属性缺失、写错或值为none，导致伪元素盒模型未生成；必须设content: ""并配合display: block/inline-block及定位上下文才能正常渲染。
伪元素内容为空时页面看不到效果，根本原因不是“空”，而是 content 属性压根没写、写错或值为 none——浏览器直接跳过创建盒模型，连渲染树都不进。
content 没写或写成 none，伪元素根本不存在
哪怕你给 ::before 设置了 background: red、width: 20px、height: 20px，只要 content 缺失或为 none，DevTools 的 Computed 面板里连这条样式都不会出现。
-
content: ""是合法且必须的“空内容”声明，它会生成一个真实存在的匿名盒 -
content: none或完全不写content，等同于没声明该伪元素 - 漏掉英文引号（如写成
content: →）会导致 CSS 解析失败，整条规则被丢弃 - 预处理器中变量未展开（如 Sass 的
content: "#{$icon}"但$icon为空）也会让最终值变成none
display 保持 inline，尺寸和定位全部失效
::before 和 ::after 默认是 display: inline，此时 width、height、top、left 全部无效——这不是 bug，是规范行为。
- 要设宽高或绝对定位，必须显式加
display: block或display: inline-block - 仅用背景图装饰时，
content: "" + display: block就够；若需撑开空间，display: inline-block更可靠（避免 margin 合并） - 临时调试可加
border: 1px solid red，立刻验证盒子是否真生成、位置是否正确
父容器或上下文把伪元素“吃掉”了
伪元素虽独立，但它的渲染受宿主环境严格约束。常见隐形拦截点：
立即学习“前端免费学习笔记（深入）”；
- 父元素设了
overflow: hidden，而伪元素用position: absolute偏移出边界，直接被裁掉 - 伪元素用了
position: absolute，但父元素没设position: relative，它就会上溯到<html>定位，极易跑出视口 - 在
<img>、<input>、<textarea>这类可替换元素上写::before，CSS 引擎直接跳过解析，不报错也不渲染 - 某些重置库（如 Normalize.css）全局写了
*::before, *::after { content: "" }，后续子选择器若删掉content，就会退回到none
最常被忽略的其实是第一关：检查 DevTools 中伪元素的 content 计算值是不是 none。只要这一步没过，后面调 z-index、transform、opacity 全是白忙。
