伪元素未设content属性就根本不会渲染；必须显式声明content（如content: ""）才能生成盒模型，否则即使设置background-color、width等样式也完全无效。
伪元素没设 content 就根本不会渲染
伪元素 ::before 和 ::after 必须有 content 值（哪怕是空字符串）才会生成盒模型；没 content，background-color 再对也无处可画。
-
.box::before { background-color: #ff6b6b; }→ 完全不生效，DevTools 里都看不到这个伪元素 - 正确写法：
.box::before { content: ""; display: block; width: 20px; height: 20px; background-color: #ff6b6b; } - 如果只想要装饰色块，
content: ""是最低要求；写content: " "（空格）也行，但可能受white-space影响
伪元素尺寸为 0 导致背景不可见
background-color 只作用于内容区 + padding 区，伪元素默认是 inline 级别，宽高为 0，颜色自然“存在但看不见”。
- 常见表现：加了
background-color，DevTools 显示样式已应用，但页面上啥也没有 - 快速验证：临时加
border: 1px solid red;，看是否有框线出现 - 解决方式：显式设
display: block（或inline-block）、再给width和height，或用padding撑开空间
父容器或自身设置了 user-select: none
这虽不是伪元素专属问题，但容易被忽略：如果伪元素所在元素或其祖先设了 user-select: none，某些浏览器（尤其是 Safari）会抑制伪元素的渲染逻辑，导致背景色失效。
- 典型场景：Vue 的
<template>中某层加了user-select: none，子级伪元素背景突然消失 - 排查方法：在 DevTools 中选中该伪元素，检查 Computed 面板里的
user-select值是否为none - 临时修复：给伪元素加
user-select: text;（仅当需要文本可选时），否则优先移除祖先的user-select: none
伪元素继承了透明或无效的 color 导致背景被“吃掉”
伪元素若未显式设 color，又恰好继承了 color: transparent 或 color: currentColor 且父级 color 为透明，部分浏览器（如旧版 Safari）会连带压制 background-color 的绘制。
立即学习“前端免费学习笔记（深入）”；
- 现象：背景色在 Chrome 正常，Safari 里变淡、发灰甚至完全不可见
- 原因：不是 bug，而是某些渲染引擎把伪元素当作“文本附属物”，当文字颜色不可见时，连带弱化背景
- 稳妥做法：
.icon::before { content: ""; display: inline-block; color: #000; background-color: #3b82f6; }—— 显式给个不透明的color
user-select、color 继承、display 类型三者叠加后的隐性冲突——单看一条规则都对，合起来就失效。 
