伪元素不渲染的根本原因是浏览器未将其视为可渲染节点；常见问题包括content值为none/normal/unset、引号缺失、预处理器变量未展开、JS注入含不可见字符，或display未正确设置。
content 值写对了但伪元素还是不渲染
根本原因只有一个：浏览器压根没把它当“可渲染节点”处理。哪怕你写了 ::before，只要 content 值是 none、normal、unset，或者干脆没写，它就等于不存在——DOM 里没节点，DevTools 里看不到，动画 transition 全失效。
常见踩坑点：
-
content: ""是合法的；content: none是无效的，等同于没写 - 漏掉英文引号，比如写成
content: "→"✅，但误写为content: →❌（解析失败） - 用预处理器时变量未展开，如 Sass 中写了
content: "#{$icon}"，但$icon为空或未定义 - JS 动态注入样式时，字符串里混入了不可见字符（比如从 Word 复制过来的全角空格）
::before 渲染了但页面上完全看不见
这时候它其实“在”，只是没体积、没颜色、没位置——典型症状是 DevTools Elements 面板里能看到 ::before 节点，Computed 样式里 content 计算值也是你设的，但页面空白。
快速验证和修复方法：
立即学习“前端免费学习笔记（深入）”；
Miller CSV TSV JSON 数据处理器
下载
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
- 临时加一句
border: 1px solid red，立刻看到盒子是否生成并定位到预期位置 -
display必须显式设置：inline默认不响应width/height/top/left，改成display: block或display: inline-block - 如果用了
content: url(...)，去 Network 面板确认图片请求是否 404 或被 CORS 拦截 - 父元素若设了
overflow: hidden，而伪元素靠position: absolute移出边界，就会被裁掉
伪元素被盖住、透明、或跑出视口
不是没渲染，是“存在但不可见”。这类问题往往出现在加了 position: absolute 或动画之后。
关键检查项：
-
z-index只对定位元素生效：确保伪元素有position: relative/absolute，且父容器已建立层叠上下文（比如设了position: relative） - 颜色和背景：检查
color、background-color是否为transparent，或与父背景色一致 -
opacity: 0或visibility: hidden可能从父级继承，或被其他规则覆盖 - 用
transform: translateZ(0)或will-change: transform可能意外创建新层叠上下文，打乱原有层级
字体图标或 Unicode 内容显示为空白
这类问题表面是“内容不显示”，实际是字符未正确解析或字体未加载。
排查顺序很明确：
- 确认
content中 Unicode 写法：4 位必须用\XXXX（如\e900），超过 4 位用\{1F60A}，且 CSS 文件保存为 UTF-8 无 BOM - 检查 DevTools 的 Computed 面板，看伪元素的
font-family是否为你声明的图标字体名（比如"iconfont"） - @font-face 规则是否在伪元素样式之前加载？CDN 地址是否返回 200？
- 避免依赖
attr()：比如content: attr(data-icon)，但 HTML 里写的是data-icon-name，连字符拼写不一致就为空
content 没写、写了但引号漏了、或者 display 类型没调对——这三个点反复检查一遍，90% 的“不显示”问题就解决了。 
