content属性根本不支持var()函数，仅接受字符串、attr()、counter()、counters()和url()五类值；显示数字需用counter-reset中转，字符串则必须通过data属性+attr()配合js同步。
content属性根本不支持var()函数
这不是兼容性问题，也不是你写错了变量名，而是CSS规范明确禁止content解析var()。浏览器看到content: var(--label)时，连求值都不会尝试，直接静默丢弃整条声明——DevTools里这行会被划掉，Computed面板里根本不会出现content值。
它只接受四类值："string"、attr()、counter()、counters()和url()。其中var()不在列表里，也不参与任何计算上下文。
-
content: "✓"✅ 合法 -
content: attr(data-tip)✅ 合法（但HTML必须真有data-tip属性且非空） -
content: counter(num)✅ 合法 -
content: var(--tip)❌ 语法非法，被忽略
想显示数字变量？用counter-reset中转
突破口在counter-reset的第二个参数：它支持var()求值，而counter()能读取这个已初始化的计数器值。链路是：--num: 42 → counter-reset: num var(--num) → content: counter(num)。
- 必须把
counter-reset和content写在同一选择器下，避免继承干扰 - 计数器名（如
num）需唯一，多个元素共用会互相覆盖 -
var(--num)必须是整数；99.6会被截断为99 - 若变量未定义或为空字符串，计数器默认初始化为
0
想显示字符串、图标或任意文本？只能靠attr() + HTML属性
content不支持字符串拼接，也不支持var()嵌入，所以纯CSS无法绕过这个限制。唯一合规路径是把变量值同步到HTML属性，再用attr()读取：
- HTML写
<button data-label="Save"></button> - CSS写
button::after { content: attr(data-label); } - JS动态更新时，必须操作
element.dataset.label = "Updated"，不能只改CSS变量 - 编辑器可能误标
content: var(--x)为有效，但运行时无效——硬刷新后看DevTools的Computed面板确认
Tailwind用户容易漏掉的五件事
after:content-[""]只注入content，其余全靠手动补。常见失效原因：
- 没加
after:block或after:inline-block→after:h-4等尺寸类无效 - 宿主元素没设
relative→after:absolute定位参考系错乱 -
tailwind.config.js里没启用content扩展 → JIT编译器压根不生成对应CSS - 引号格式错误：
after:content-[✓]非法，必须写成after:content-["✓"] -
伪元素层级低于文字内容 → 需加
after:z-10并确保宿主有层叠上下文
真正难处理的不是“怎么写”，而是变量值看起来像生效了——比如缓存残留、属性值与变量名巧合一致，或编辑器静态分析误导。每次验证前，Ctrl+Shift+R硬刷新，再清空Computed面板重看。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
