因为伪元素必须有合法content值才生成渲染节点，未写、写为none或normal均被浏览器跳过；content: ""是最轻量合法触发方式，attr()取值依赖属性真实存在且非空。
为什么::before不写content就完全不渲染
因为浏览器规范强制要求：伪元素必须有合法的content值才会生成渲染节点。没写、写成content: none或content: normal，等同于告诉浏览器“别创建这个东西”，后续所有样式（哪怕background-color、width全写了）都会被跳过。
这不是兼容性问题，也不是浏览器 bug，而是 CSS 渲染流程的硬性规则——伪元素在“生成盒模型”阶段就被过滤掉了。
-
content: ""是最轻量的合法触发方式，生成空盒子，可用于纯装饰（比如画边框、三角） -
content: " "（一个空格）也能触发，但要注意 HTML 空白折叠逻辑，某些 inline 布局下可能表现不稳定 -
content: attr(data-label)必须确保对应 HTML 元素真有该属性，且值不是空字符串（data-label=""会渲染但内容为空）
常见误以为“写了content却没显示”的真实原因
写了content但页面还是空白？大概率不是content本身失效，而是它被其他隐式条件压制了：
- 父元素设了
display: none或visibility: hidden→ 伪元素直接继承不可见 - 父容器有
overflow: hidden，而伪元素用position: absolute溢出裁剪了 - 伪元素默认
display: inline，没设宽高/背景/边框，又没内容文本，视觉上就是“透明无体积” - 用了单冒号
:before，但在现代构建工具（如 CSS Modules、Vite）中可能被忽略，建议统一用双冒号::before
attr() 动态取值为什么经常“取到空”
attr() 不是 JS 的响应式绑定，它只读取 DOM attribute 的当前值，且返回永远是字符串：
立即学习“前端免费学习笔记（深入）”；
-
el.setAttribute('data-status', 'done')→ 触发更新 -
el.dataset.status = 'done'→ 不触发，因为没改 attribute -
attr(data-count)返回"42"，不是数字42，不能用于calc()计算 - 没有 fallback：属性不存在时，
content就是空字符串，不会显示默认值
调试时直接在 DevTools 的 Elements 面板里看目标元素有没有对应 data-* 属性，比查 CSS 更快。
为什么开发者总在 content 上卡住
因为content是唯一开关，但它不报错、不警告、不进 DOM 树——它只是“静默跳过”。Chrome DevTools 的 Computed 标签页里搜 content，如果计算值是 none，就证明这条规则根本没生效，不用往下查颜色或 z-index。
真正容易被忽略的是：伪元素渲染后不可选、不可复制、不能被 JS 获取，也进不了可访问性树。它只适合装饰，别指望它承载关键信息或参与交互逻辑。
