为什么CSS自定义属性在伪元素里不生效？-css教程-PHP中文网

content 属性中使用 var() 是语法错误，css 规范明确禁止，浏览器直接忽略；正确做法是用 data- 属性配合 attr()，或拆分样式与文字逻辑。

为什么css自定义属性在伪元素里不生效？

浏览器根本不会解析 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)

伪元素（::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:、after: 等修饰符只扫描 HTML 中 class 属性里**直接出现的工具类字符串**，不会解析你手写的 CSS 文件里的 @layer components 或 @apply 调用。

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

你在 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 在 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 全部无效