:before 伪元素必须设置 content 属性（如 content: “”）才能渲染，否则不生成节点；需检查 position、z-index、overflow、display 类型及引号转义等常见问题。
content 属性为空或缺失导致 :before 不显示
伪元素 :before 默认不会渲染，必须显式设置 content 属性，哪怕只是空字符串。常见错误是只写了样式却忘了加 content，结果整个伪元素完全不可见。
-
content值为none或未声明 → 伪元素不生成，dom 中无对应节点，也无法触发后续样式 - 想显示空占位但保留样式（比如仅用于布局撑开），必须写
content: ""，不能省略 - 若内容来自属性（如
data-label），确保 html 中该属性存在且拼写正确：content: attr(data-label)
伪元素未触发渲染的常见原因
即使写了 content，:before 仍可能“看不见”，往往不是 css 写错了，而是它根本没被浏览器当作可渲染节点处理。
- 父元素没有设置
position: relative（或其他非Static值），而你在用absolute定位伪元素 → 它会相对于最近的定位祖先偏移，若无祖先，则按初始包含块定位，容易跑出视口 - 伪元素被其他元素遮盖：检查
z-index是否生效（需配合position）、父容器是否设置了overflow: hidden - 设置了
display: none或visibility: hidden→ 伪元素继承自父元素时也会被隐藏，注意不要在父选择器里误加
content 中特殊字符与引号的使用陷阱
content 的值对引号和转义很敏感，一个错位就导致内容不显示或报解析异常。
- 纯文本内容必须用单引号或双引号包裹：
content: "→"，不能写成content: → - 要插入 Unicode 字符（如箭头、图标），用
转义十六进制：例如content: "2192"（→），注意反斜杠后必须是恰好 4 位十六进制，不足补零 - 如果引号内含变量（如 sass/less），确保预处理器正确编译；原生 CSS 不支持变量插值，
content: "$var"是无效的字面量
兼容性与 display 类型影响可见性
:before 默认是 display: inline，某些场景下会导致尺寸、换行或对齐异常，进而让人误以为“没显示”。
立即学习“前端免费学习笔记（深入）”；
- 需要设置宽高、背景色或绝对定位时，必须显式声明
display（如block、inline-block或flex） - 旧版 IE8 支持
:before，但不支持attr()中带连字符的属性名（如data-icon-name应改用data-iconname） - 部分安卓 webview 对
content: url(...)加载失败时静默忽略，建议优先用字体图标或 base64 内联 svg 替代
真正卡住人的地方，往往不是语法写错，而是 content 没写、写了但引号漏了、或者 display 类型没调对——这三个点反复检查一遍，90% 的“不显示”问题就解决了。