伪元素::before不显示的主因是content属性未声明或值无效，如content: none、normal、unset均不渲染；正确写法为content: ""或content: " "等；还需检查display、定位上下文、overflow、z-index及资源路径等问题。
content 属性根本没写或写错了
伪元素 ::before 不显示，八成是因为 content 属性压根没声明，或者值是无效的。content: none、content: normal、content: unset 都不会触发渲染；content 完全不写，等价于 content: none。浏览器直接跳过生成该伪元素节点，后续所有样式（包括 display、background、animation）都白搭。
-
content: ""—— 正确，生成空盒子，可用于布局或装饰 -
content: " "—— 也有效，但带一个空格（注意引号内有空格） -
content: attr(data-icon)—— 必须确保对应 HTML 元素真有data-icon属性，且值非空（data-icon=""可，data-icon缺失则不渲染） - 用 Unicode 字符时，必须用
\XXXX格式（如content: "\2192"），反斜杠后严格 4 位十六进制；超 4 位要用\{1F60A}，且文件编码必须是 UTF-8
::before 渲染了但看不见
即使 content 正确，::before 默认是 display: inline，没有宽高、背景、边框时，在页面上就是“透明无体积”的——它存在，但你看不见。
- 加
display: block或display: inline-block才能设width、height、background-color - 临时加
border: 1px solid red或outline: 1px solid blue，立刻确认盒子是否生成并定位到预期位置 - 父元素若设了
overflow: hidden，而伪元素用position: absolute偏移出边界，就会被裁掉 - 颜色问题：检查
color是否为transparent，或background-color是否和父背景一致
定位失效或被遮挡
用了 position: absolute 却找不到伪元素？不是代码错，而是定位上下文没配对。
- ::before 的
top/left是相对于「最近的已定位祖先」（position为relative、absolute、fixed或sticky的祖先）偏移的；如果父元素没设position，它就可能飞到body左上角甚至视口外 - 给伪元素的**直接父元素**加
position: relative是最稳妥的做法 -
z-index只在定位元素上生效：必须同时有position: absolute（或其它非static）+z-index，否则无效 - 父元素若含
transform、filter或will-change，会创建新层叠上下文，导致伪元素的z-index相对范围变小，容易被盖住
字体图标或图片内容加载失败
用 content: url(…) 或字体图标时，“空白”往往不是 CSS 写错了，而是资源没加载成功。
立即学习“前端免费学习笔记（深入）”；
-
content: url(./icon.svg)路径 404？打开 Network 面板看请求状态 - 字体图标场景：确保
@font-face已加载，且伪元素上显式声明了font-family（不能只靠继承），比如font-family: "iconfont"; - 字体文件里真有你写的 Unicode 编码吗？例如
content: "\e900"，得确认e900在该字体中确实定义了图标 - 避免在
<input>、<img alt="为什么CSS::before伪元素没有显示" >等替换元素上用 ::before —— 它们不支持伪元素
content 没写、写了但引号漏了、display 类型没调对、或者父元素悄悄把 overflow: hidden 或 display: none 继承过来了——这几个点挨个过一遍，绝大多数“不显示”问题当场就破。 
