伪元素::before不显示的主因是content未声明或值为none/normal/unset，必须显式设为""或" "；其次需检查display类型、定位上下文、层级及资源加载。
content属性没写或写错了
伪元素::before不显示，八成是因为content压根没声明，或者值是none、normal、unset——这些等价于没写，浏览器直接跳过渲染，DOM里根本没这个节点。
必须显式写：content: ""（空字符串，推荐）或content: " "（注意引号内有一个空格）；用attr()时，确保HTML中真有对应属性，比如content: attr(data-icon)，而元素得带data-icon="arrow"。
常见错误：
- 漏掉英文引号，写成
content: →而不是content: "→" - Unicode字符写错格式，比如
content: "\2192"是对的，content: "→"也可行（需UTF-8编码），但content: "\u2192"在原生CSS里无效 - Sass/Less中变量未展开，如
content: "#{$icon}"，而$icon为空或未定义
::before渲染了但页面上看不到
DevTools Elements面板能看到::before节点，Computed里content也对，但页面空白——说明它“存在”，只是没体积、没颜色、没位置。
快速验证：临时加border: 1px solid red或outline: 1px solid blue，立刻确认盒子是否生成并落在预期位置。
关键修复点：
-
display必须显式设置：inline默认不响应width/height/top/left，改成display: block或display: inline-block - 父元素设了
overflow: hidden，而伪元素用position: absolute偏移出边界，会被裁掉 -
color或background-color和父背景一致，或值为transparent - 用了
content: url(...)，但图片404或被CORS拦截——去Network面板查请求状态
定位失效或被遮挡
::before用了position: absolute却找不到？不是代码错，而是定位上下文没配对。
top/left是相对于「最近的已定位祖先」（position为relative、absolute、fixed或sticky）计算的。如果父元素没设position，它就可能飞到body左上角甚至视口外。
稳妥做法：给伪元素的**直接父元素**加position: relative。
层级问题也常被忽略：
-
z-index只在定位元素上生效，必须同时有position（非static）+z-index - 父元素若含
transform、filter或will-change，会创建新层叠上下文，导致伪元素的z-index作用范围变小 - 某些重置样式（如
*::before, *::after { content: "" }）可能覆盖你后续规则
字体图标或SVG内容加载失败
用字体图标（如Font Awesome）或content: url(...)时，“空白”往往不是CSS写错了，而是资源没加载成功。
检查点：
- 开发者工具Elements面板里，确认
::before计算出的font-family是你声明的图标字体名（如"iconfont"），不是继承来的系统字体 - @font-face规则是否在伪元素样式前加载，CDN链接是否返回200（不是404或跨域报错）
- 用
background-image配合content: ""时，必须同时设width和height，否则背景无渲染区域 - 安卓WebView对
content: url()失败时可能静默忽略，建议优先用base64内联SVG或字体图标替代
真正卡住人的地方，往往不是语法写错，而是content没写、写了但引号漏了、或者display类型没调对——这三个点反复检查一遍，90% 的“不显示”问题就解决了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
