能，但仅限于content属性且需字符串上下文；var()在content中仅原样输出字符串，拼接须用逗号分隔，回退值不可嵌套，伪元素样式需单独声明。
伪元素 content 里能直接用 var() 吗
能，但仅限于 content 属性，且必须是字符串上下文。CSS 变量（自定义属性）本身不参与计算或类型转换，var(--color) 在 content 中会被原样插入为文本——哪怕你定义的是 --size: 16px，它也不会自动变成尺寸，只会输出字符串 "16px"。
常见错误是以为 var(--width) 能直接当数值用于 width 或 transform，但在伪元素中这些属性根本不能通过 content 控制；而 content 又不支持表达式拼接，比如 var(--prefix) "：" var(--value) 会直接报错。
-
content: var(--label);✅ 合法，输出变量值的字符串 -
content: var(--icon) " ✅";❌ 语法错误，var()不能和字符串字面量直接相邻拼接 -
content: attr(data-label);✅ 可配合 HTML 属性兜底，但和var()无关
content 中安全拼接变量与固定文本的方法
必须用逗号分隔多个 var() 或字符串，让浏览器按顺序合并。CSS 规范要求 content 的值是 <string> | <uri> | <counter> | ...</counter></uri></string>，其中 <string></string> 支持由空格/逗号分隔的多个 token，每个 token 单独解析。
所以正确写法是显式用逗号分隔，中间加空格不影响：
div::before {
content: var(--prefix), ": ", var(--value);
}
这等价于拼接三个独立字符串，浏览器会把它们连成一个完整文本。注意：冒号后的空格是字面量字符串 " : "，不是 CSS 自动加的。
- 所有拼接项都必须是合法的
content子值：字符串、var()、attr()、counter()等 - 如果某个
var()未定义，默认回退值必须提供，否则整个content声明失效（该伪元素不渲染） - 避免在
var()回退值里嵌套引号，比如var(--txt, "hello")是错的，应写成var(--txt, hello)（无引号）
伪元素样式受变量控制时的常见陷阱
想用 CSS 变量控制伪元素的颜色、大小、偏移？没问题，但别试图在 content 里“动态生成样式”——content 只管内容文本，样式得另写规则。
例如，你想让 ::after 的背景色随 --theme-color 变化，应该单独声明：
button::after {
background-color: var(--theme-color, #007bff);
width: var(--indicator-size, 4px);
}
而不是幻想用 content 把样式代码塞进去。这里容易混淆的点在于：伪元素的“内容”和“表现”完全解耦。
-
content为空（如content: ""）时，伪元素仍可设置宽高/背景/边框，只要它有盒模型（需display非 none） - 变量作用域是继承的，但伪元素不继承父元素的自定义属性，除非父元素显式设置了（因为伪元素是父元素的子树一部分）
- 使用
var(--x, red)时，回退值不能是另一个var()，也不支持嵌套，如var(--x, var(--y))无效
兼容性与运行时更新的实际表现
Chrome 49+、Firefox 31+、Safari 9.1+ 都支持伪元素中使用 var()，但 Safari 9.1–13.1 对 content 中多值拼接的支持有 bug：逗号分隔的多个 var() 可能只渲染第一个。稳妥起见，复杂场景建议用单个变量承载完整字符串，或用 JS 注入。
变量值变更时，伪元素内容会实时重绘，无需 JS 干预——这是 CSS 自定义属性的核心优势。但要注意：如果变量被 JavaScript 修改后没触发重排（比如只改了未使用的变量），浏览器可能延迟响应。
- 修改变量后立即读取
getComputedStyle(el).content拿不到新值，因为它是只读计算值，且content在 computed style 中始终返回序列化后的字符串，不含var() - 动画无法直接对
content做过渡，但可以对颜色、透明度等其他可动画属性做 - 服务端渲染（SSR）时，若变量定义在 JS 中，首次渲染可能取不到值，需确保 CSS 变量在
<style></style>标签或外部 CSS 中提前声明
最常被忽略的是回退值的语义：它不只是“备用”，而是变量未定义时的唯一取值，且不参与级联。一旦漏写，整条声明就静默失效——这点比 JS 的默认参数更严格。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
