<p>content 属性中使用 var() 是语法错误，CSS 规范明确禁止，浏览器直接忽略；正确做法是用 data- 属性配合 attr()，或拆分样式与文字逻辑。</p>
content 属性里写 var() 是语法错误，不是兼容性问题
浏览器根本不会解析 content: var(--icon)，直接标为无效或静默忽略。CSS 规范明确禁止在 content 中使用 var()，它只接受字面量字符串、attr()、counter() 等有限函数。哪怕变量定义在 :root 且值为 "★"，这行也非法。
VS Code + stylelint 可能提前标红，但 Chrome/Firefox 的 DevTools 通常只在 Styles 面板里把整条声明划掉，容易误判成“没生效”。这不是浏览器差异，是规范铁律。
- ✅ 正确做法：用
data-属性 +attr()，比如data-tip="保存成功"配合::after { content: attr(data-tip); } - ✅ 若需样式联动文字（如主题色+对应提示），拆成两层：CSS 变量控颜色，
data-控文字 - ⚠️ 注意单位：变量存纯数字（如
--size: 12）时，font-size: var(--size)会失效；得写成--size: 12px或font-size: calc(var(--size) * 1px)
currentColor 在伪元素中是黑的，因为默认不继承 color
伪元素（::before/::after）初始 color 是 initial（即黑色），不是从宿主继承来的。所以 border-color: currentColor 拿到的是黑，不是宿主的文字色。
必须显式写 color: inherit 或 color: var(--text)，让伪元素先拥有一个可计算的 color 值，currentColor 才能读取它。
立即学习“前端免费学习笔记（深入）”；
- ✅ 最稳组合：
::before { color: inherit; border: 1px solid currentColor; } - ❌
background-color: currentColor在 IE11 完全不支持，现代浏览器虽支持但 UA 样式可能干扰 - ⚠️ 即使写了
color: inherit，若宿主color是transparent、unset或未声明，Computed 面板里仍是initial，currentColor还是黑
Tailwind 的伪元素修饰符（如 before:）在自定义类里压根不工作
Tailwind 的 before:、after: 等修饰符只扫描 HTML 中 class 属性里**直接出现的工具类字符串**，不会解析你手写的 CSS 文件里的 @layer components 或 @apply 调用。
你在 CSS 里写 .btn-icon { @apply before:content-["→"]; }，只要 before:content-["→"] 没被 Tailwind 编译进 CSS，就完全无效——@apply 只能展开已生成的工具类。
- ✅ 必须在
tailwind.config.js的theme.extend.content中显式声明字符串值，例如{ "→": '"→"' } - ✅ 伪元素要可见，还得配
before:block或before:inline-block（否则content不渲染） - ⚠️ 默认只生成
content-none和content-[""]，其他所有字符串都得手动加配置，否则构建后 CSS 里根本没这条规则
::marker 样式不生效，大概率是浏览器不支持或 display 被改了
::marker 在 Chrome 86+/Firefox 89+/Safari 15.4+ 才开始支持，旧版 Safari、iOS Safari 15.3 及更早、Electron 内核等直接忽略整个规则，DevTools 里都看不到 ::marker 面板。
即使浏览器支持，也要求 li 的计算 display 值必须是 list-item。一旦父容器用了 display: flex 或你写了 li { display: block }，::marker 就彻底消失。
- ✅ 全兼容方案：用
list-style-type+ 继承color，比如li { color: #3b82f6; list-style-type: disc; } - ✅ 自定义符号降级：用
li::before模拟，content: "\2022"（Unicode 圆点）比"•"更稳 - ⚠️
::marker只允许极少数属性：color、font-size（Chrome 110+ 起稳定）、font-family（部分忽略），margin/padding/background全部无效
真正容易被忽略的一点：开发者总在 content 上卡住，然后回头怀疑变量、继承、浏览器兼容性，其实问题就出在那条 content: var(--x) 本身就不合法。
