::before伪元素不显示的根本原因是未设置合法content值，浏览器根本不会创建渲染节点；必须设content: ""等非none值，并配合display:block/inline-block及父元素position:relative才能正常渲染。
不设置 content，::before 就根本不会生成渲染节点——不是“看不见”，是浏览器压根没创建它。
content 是伪元素的“存在开关”
浏览器规范强制要求：::before 和 ::after 必须有合法的 content 值才能进入渲染树。没有它，CSS 引擎连盒模型都不构造，后续所有样式（width、background、position）全被忽略。
-
content: ""—— 合法，生成空盒，可设尺寸/背景/定位 -
content: "→"或content: "\2192"—— 合法，显示文本或转义字符 -
content: attr(data-label)—— 合法，但 HTML 元素必须真实存在data-label属性（值为空字符串也行，缺失则无效） -
content: none、content: normal、content: unset—— ❌ 全部等同于未声明，伪元素不生成 - 漏写
content本身 —— 最常见错误，尤其在 SCSS 嵌套中容易被忽略
写了 content 却还是“看不见”，大概率是 display 没配对
::before 默认是 display: inline，此时 width、height、top、left 等属性全部无效——这是规范行为，不是 bug。
- 要设宽高或背景色：必须加
display: block或display: inline-block - 要在 Flex 容器中占位或响应
flex-grow：推荐display: block，避免用inline或未声明 - 仅靠边框或 outline 调试时：
border: 1px solid red+display: inline-block是最快验证是否真渲染的方法 - 旧版安卓 WebView（如 4.2.2）对
display更敏感：父元素也需显式设为inline-block或block，否则直接跳过解析
定位偏移后“消失”，其实是找错了参照物
position: absolute 的伪元素不相对于父元素定位，而是向上查找「最近的已定位祖先」（position 为 relative、absolute、fixed 或 sticky）。找不到就按视口定位，极易跑出可视区。
- 最简解法：给伪元素的**直接父元素**加
position: relative - 避免在
<span></span>、<a></a>这类默认display: inline的元素上直接设position: relative后挂伪元素，老浏览器兼容性差 - 父容器设了
overflow: hidden，而伪元素用top: -10px偏移 → 内容被裁掉，检查 computed 样式里的overflow值 - 用 DevTools 的 “Layout” 面板高亮伪元素盒子，看
left、top是否异常（比如left: -9999px）
真正卡住人的地方，往往不是语法写错，而是 content 没写、写了但引号漏了、或者 display 类型没调对——这三个点反复检查一遍，90% 的“不显示”问题就解决了。调试时优先打开 DevTools Elements 面板，右键伪元素 → “Force element state” → :before，再逐项看 computed 样式里的 content 值和 display 计算结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
