伪元素未渲染的首要原因是content值为none或未声明；必须设置合法content（如""或" "）并配合display:block等才能生效，且引号和编码需严格正确。
伪元素没渲染？先看 content 值是不是 none 或根本没写
浏览器对 ::before 和 ::after 的处理非常严格：只要 content 是 none、normal、unset、initial，或者压根没声明，它就完全不生成盒模型，后续所有样式（包括 display、background、position）都无效。这不是“隐藏”，是“不存在”。
-
content: ""✅ 合法，生成空盒，可设宽高、背景、flex 属性 -
content: " "✅ 一个空格，比""在某些 inline 场景下更稳定 -
content: attr(data-tip)✅ 但 HTML 中必须存在且非空的data-tip属性 -
content: none❌ 等同于没写，伪元素被跳过 - 完全不写
content❌ 浏览器忽略整个规则，DevTools Elements 面板里都看不到该伪元素节点
写了 content 却看不见？检查是否被 display 或尺寸卡住
content 正确只是第一步。伪元素默认是 display: inline，这意味着 width、height、flex-grow、align-self 全部失效，看起来就像“没显示”——其实它渲染了，只是没体积、没背景、没边框。
- 需要撑开空间或设尺寸 → 显式加
display: block或display: inline-block - 要参与 Flex 布局 → 必须设
display: block或display: flex（inline不行） - 仅靠
background-color或border表现？务必配width和height，否则区域为 0 - 调试技巧：临时加
border: 1px solid red，立刻验证是否真生成并定位到了预期位置
Flex 容器里伪元素“消失”？确认它是否进了渲染树
在 display: flex 或 display: inline-flex 的父容器中，伪元素不会自动变成 flex item——它得先是个“已生成的盒”。而这个前提，只由 content 决定。
- 即使父容器是 flex，
content: none或未声明 → 伪元素不在 flex items 列表中（DevTools Layout 面板可查） -
content: ""+display: inline→ 虽然进了布局，但flex相关属性大多不生效 - 推荐组合：
content: ""+display: block（通用）或display: flex（内部需嵌套布局） - 注意：伪元素一旦进入 flex 布局，就受
justify-content、flex-wrap影响，但它没有 DOM 可 inspect，出问题只能回溯content和display
引号、转义、编码这些细节，真会让人卡一小时
content 对语法极其敏感，一个引号错位或 Unicode 写法不对，整条规则就静默失败。
- 纯文本必须用英文单/双引号包裹：
content: "→"，不能写成content: → - Unicode 字符必须用
\+ 4 位十六进制：content: "\2192"（→），不是"\u2192"或"\U2192" - emoji 直接写（如
content: "?"）可行，但 CSS 文件必须存为 UTF-8 无 BOM - SCSS/Less 中变量插值不被原生 CSS 支持：
content: "#{$icon}";编译后若输出content: "$icon";就是无效字面量 - 复制粘贴时容易混入全角引号、零宽空格等不可见字符，建议手动重敲引号和内容
content 没写、写了但引号漏了、或者 display 类型没调对——这三个点反复检查一遍，90% 的“不显示”就解决了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
