伪元素::before不显示的主因是content属性未声明或值无效；正确写法仅限content: ""、content: " "、content: attr()（属性需存在且非空）、content: "\xxxx"（unicode转义）等。
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缺失则不渲染） -
content: "\2192"——Unicode 字符必须用\XXXX格式，反斜杠后严格 4 位十六进制；超 4 位要用\{1F60A}，且文件编码必须是 UTF-8
::before 渲染了但看不见
DevTools Elements 面板里能看到 ::before 节点，Computed 样式里 content 计算值也对，但页面上就是空白——说明它“存在但不可见”。根本原因是默认 display: inline，没宽高、没背景、没边框时，就是个透明无体积的节点。
- 临时加
border: 1px solid red或outline: 1px solid blue，立刻确认盒子是否生成并定位到预期位置 - 需要设
width/height或background-color，必须显式写display: block或display: inline-block - 如果用了
content: url(...)，去 Network 面板确认图片请求是否 404 或被 CORS 拦截 - 父元素若设了
overflow: hidden，而伪元素靠position: absolute偏移出边界，就会被裁掉
定位失效或被遮挡
写了 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相对范围变小，容易被盖住 - 检查
color是否为transparent，或background-color是否和父背景一致
字体图标或资源加载失败
用 content: url(...) 或字体图标时，“空白”往往不是 CSS 写错了，而是资源没加载成功。
- 用字体图标（如 Font Awesome、iconfont）时，确认
@font-face规则已加载，且font-family在::before上正确声明（注意继承问题，部分框架会重置，需显式覆盖） -
content中的 Unicode 编码（如\e900）必须存在于当前字体文件中，否则显示为方块或空白 - 复制粘贴时混入全角引号、富文本空格等不可见字符，会导致解析失败——建议手动输入英文双引号
- 安卓 WebView 对
content: url(...)加载失败常静默忽略，优先考虑 base64 内联 SVG 或字体图标替代
content 没写、写了但引号漏了、或者 display 类型没调对——这三个点反复检查一遍，90% 的“不显示”问题就解决了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
