伪元素 ::before 不渲染的主因是 content 属性未声明或值非法（如 none、normal），必须设为 "" 等合法值；渲染后不可见则多因 display 未设为 block/inline-block、定位上下文缺失或被 overflow/z-index/资源加载问题影响。
content 属性根本没写或值无效
伪元素 ::before 不渲染，八成是因为 content 没声明，或者写了但值是 none、normal、unset 这类非法值——浏览器直接跳过生成节点，后续所有样式（包括 display、background、animation）全失效。
-
content: ""是最常用且安全的写法，生成空盒子，可用于布局或装饰 -
content: " "（引号内一个空格）也有效，但注意空格可能被折叠，不如""稳定 -
content: attr(data-icon)要求对应 HTML 元素真有该属性，且值非空；data-icon=""可以，data-icon缺失则不渲染 - 用 Unicode 字符时必须写成
content: "\2192"（4 位十六进制），超 4 位用content: "\{1F60A}"，且文件编码必须为 UTF-8 - 漏掉英文引号（比如写成
content: →）会导致解析失败，DevTools 中该规则直接灰掉
伪元素渲染了但页面上完全看不见
这时它其实“在”，只是没体积、没颜色、没位置。DevTools 的 Elements 面板能看到 ::before 节点，Computed 样式里 content 值也对，但页面空白。
-
::before默认是display: inline，不响应width、height、top、left—— 必须显式设display: block或display: inline-block - 临时加
border: 1px solid red或outline: 1px solid blue，立刻确认盒子是否生成并定位到预期位置 - 父元素若设了
overflow: hidden，而伪元素用position: absolute偏移出边界，就会被裁掉 - 检查
color是否为transparent，或background-color是否和父背景一致
定位失效或被遮挡
用了 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相对范围变小，容易被盖住
字体图标或图片内容加载失败
用 content: url(...) 或字体图标时，“空白”往往不是 CSS 写错了，而是资源没加载成功。
- 在 Network 面板确认图片请求是否 404 或被 CORS 拦截
- 检查 DevTools 的 Elements 面板，确认
::before是否计算出正确的font-family，且值是你声明的图标字体名（如"iconfont"） - 部分安卓 WebView 对
content: url()加载失败时静默忽略，建议优先用字体图标或 base64 内联 SVG 替代 - 复制粘贴时容易混入全角空格或不可见字符（尤其从 Word 或网页复制），建议手动输入英文双引号和内容
content 没写、写了但引号漏了、或者 display 类型没调对——这三个点反复检查一遍，90% 的“不显示”问题就解决了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
