伪元素 ::before 必须显式设置 content（如 content: ""），否则不渲染；即使 content 正确，也可能因父元素隐藏、自身透明、z-index 遮挡、特殊字符编码错误或尺寸定位缺失而不可见。
content 属性值为空或缺失
伪元素 ::before 必须显式设置 content，否则浏览器不会渲染它。即使只想要一个空占位，也得写 content: ""，不能省略或设为 none（none 是无效值）。
-
content: ""—— 正确，生成空内容 -
content: " "—— 也有效，但带一个空格（注意引号内有空格） -
content: none—— ❌ 无效，会被忽略，伪元素不显示 -
content: unset或content: initial—— ❌ 同样无效，不触发渲染
元素本身不可见或被覆盖
即使 content 设置正确，::before 也可能因父元素样式“隐身”：比如父元素 display: none、visibility: hidden，或 ::before 自身被 opacity: 0、z-index 层叠遮挡。
- 检查父元素是否设置了
display: none—— 这会直接阻止所有伪元素渲染 - 确认没有意外给
::before加了opacity: 0或visibility: hidden - 若用了
position: absolute，留意z-index是否低于父层或其他兄弟元素 - 用浏览器开发者工具「强制状态」（:hover/:active）或勾选「伪元素」选项，确认样式是否被应用
content 中的特殊字符未转义或编码错误
当 content 包含图标、符号或非 ASCII 字符（如 emoji、中文、字体图标 Unicode），容易因编码不一致或未转义导致空白或乱码。
- Unicode 字符必须用
\XXXX格式（如content: "\e900"），且反斜杠后固定 4 位十六进制；超过 4 位需用大括号，如"\{1F60A}"（需 UTF-8 编码支持） - 直接写 emoji（如
content: "?"）可行，但需确保 CSS 文件保存为 UTF-8 无 BOM - 使用字体图标时，确认对应字体已加载完成，且
font-family在::before上正确声明
伪元素尺寸或定位导致视觉丢失
::before 默认是 inline 级，没有宽高，如果只设了 content 但没配 display、width、height 或 background，可能“存在但看不见”。尤其在仅靠背景色或边框表现时，极易误判为不生效。
立即学习“前端免费学习笔记（深入）”；
- 加
display: block或display: inline-block再设尺寸，才能稳定控制布局 - 若用
background-image，记得同时设width和height，否则背景无渲染区域 - 用
border或outline临时调试，确认伪元素是否真的生成并定位到了预期位置
content 值本身或它的上下文环境里——不是语法错，就是隐式约束没满足。真要排查，先看开发者工具里该伪元素节点是否存在、content 计算值是什么，再一层层验样式继承和层叠关系。 
