能，但仅限content属性且仅输出字符串；var()在content中不解析类型、不参与计算，拼接须用逗号分隔，未定义变量会导致声明失效，伪元素不继承变量需显式透传。
content里直接用var()只对字符串有效
伪元素的content属性是唯一能用var()的地方，但仅限于输出纯字符串——哪怕你定义的是--size: 16px，content: var(--size)也只会输出文本"16px"，不会被当尺寸解析。它不能参与计算，也不能自动转类型。
常见错误是写content: var(--icon) " ✅"，这会直接报语法错误。CSS不允许var()和字符串字面量紧挨着写。
- 合法写法必须用逗号分隔：
content: var(--prefix), ": ", var(--value); - 每个逗号分隔项都独立解析，浏览器最后拼成一个字符串
- 如果某个
var(--x)没定义且没设回退值，整个content声明失效，伪元素不渲染 - 回退值不能带引号，
var(--txt, "hello")错，应写var(--txt, hello)
伪元素本身不继承CSS变量，必须显式透传
伪元素::before没有DOM节点，它只继承宿主元素“计算后”的样式值（比如color: red），但不会拿到--primary: #007acc这个变量本身。如果你在宿主上定义了变量，却在::before里用color: var(--primary)，大概率是空的。
解决办法不是靠继承，而是让宿主把变量“推”过去：
- 在宿主选择器里重复声明变量：
.btn { --primary: #007acc; }，再在.btn::before { color: var(--primary); } - 避免使用
all: unset或color: inherit等会切断变量传递链的声明 - 若用
inherit想兜底，得明确写color: var(--primary, inherit)，否则inherit不生效
想动态控制图标、颜色、尺寸？别只盯content
var()在::before里能用的样式属性其实不少：除了content，还有color、background-color、font-size、transform等——只要该属性支持自定义属性替换。
但要注意类型匹配：
-
font-size: var(--size)要求--size值本身带单位，如--size: 1.2em或--size: 16px -
transform: scale(var(--scale))要求--scale是纯数字，如--scale: 1.5 - 用
currentColor配合color: var(--icon-color, currentColor)，可让图标自动响应父文本色
爬虫或自动化脚本读不到::before里的var()内容
伪元素生成的内容不在DOM中，document.querySelector('.x').textContent或XPath完全取不到content值。即使你用var(--label)动态注入，它仍是渲染层产物。
真要获取，只能走window.getComputedStyle(el, '::before').content，而且返回的是带引号的字符串，比如"\"Hello\""，需要手动去引号和转义。
更现实的方案是：优先查HTML的data-属性或接口JSON；其次正则扫CSS文件；最后才上Playwright这类渲染引擎——因为var()值可能来自JS运行时注入，静态分析根本不可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
