::before伪元素必须设置合法content值才能渲染，否则被忽略；即使渲染也可能因display、尺寸、颜色、层级等问题不可见，需综合调试。
伪元素 ::before 没内容？先确认 content 是否设了值
CSS 伪元素 ::before 必须显式设置 content 属性，否则完全不会渲染——哪怕只写 content: "" 也比不写强。浏览器会直接忽略未声明 content 的 ::before 规则。
-
content: none或content: normal都无效，仅content: ""、content: "文本"、content: url(...)等合法值才触发渲染 - 如果用 JS 动态插入样式，确保
content字符串里没有意外的空格或不可见字符（比如全角空格） - 在 DevTools 中检查该伪元素是否被其他规则覆盖（比如某条
content: unset覆盖了你写的值）
::before 渲染了但看不见？检查 display 和尺寸
即使 content 正确设置了，::before 默认是 display: inline，且不占布局空间——若内容为空字符串、无背景、无边框、无宽高，它就“存在但不可见”。
- 给它加
display: block或display: inline-block，再配width/height或padding，快速验证是否真没渲染 - 如果用了
content: url(...)，图片路径错误或跨域限制会导致“空白”，可在 Network 面板看请求是否 404 或被拦截 - 注意父元素是否设置了
overflow: hidden，且伪元素溢出范围被裁剪
层级和颜色问题：为什么有内容却显示为透明或被遮挡？
::before 默认 z-index 为 auto，渲染顺序取决于其所在堆叠上下文。常见表现是“写了但看不到”，其实是被盖住了或颜色与背景一致。
- 加上
z-index: 1并确保父元素有定位（position: relative等），才能让z-index生效 - 检查
color、background-color、opacity是否为transparent或与背景同色 - 如果父元素有
transform、filter或will-change，可能创建新层叠上下文，影响::before的绘制层级
/* 示例：可靠显示一个红色三角形前缀 */
.icon::before {
content: "";
display: inline-block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid red;
margin-right: 8px;
vertical-align: middle;
}伪元素的“不可见”往往不是单一原因，而是 content 缺失、display 未适配、尺寸/颜色/层级三者中至少一个没调对。调试时优先打开 DevTools 的 Elements 面板，右键伪元素 → “Force element state” → :before，再逐项检查 computed 样式里的 content 值和 display 类型。
立即学习“前端免费学习笔记（深入）”；
