不能，content属性规范明确禁止使用var()函数，仅接受字符串字面量、attr()、counter()和counters()；即使变量定义为带引号字符串，content: var(--tip)仍属语法错误，浏览器会静默忽略。
伪元素中 content 能用 var() 吗？能，但有硬性限制
可以，但必须满足两个前提：一是该伪元素的 content 值是字符串类型（即带引号），二是 CSS 变量本身也得是带引号的字符串值。浏览器不会自动给变量值加引号——content: var(--tip); 中如果 --tip 的值是 error（没引号），实际解析会失败，变成空内容或报错。
content: var(--x) 的写法细节和常见错误
关键不是“能不能用”，而是“怎么写才不白忙活”。下面这些点踩一个就失效：
- 定义变量时必须手动加引号：
:root { --tip: "⚠️ 错误"; }，不能写成--tip: ⚠️ 错误 - 在
content里引用时，var()本身不负责补引号，所以content: var(--tip);才合法；而content: var(--tip, "默认");的默认值也得带引号 - JavaScript 修改时，引号要双层包裹：
el.style.setProperty('--tip', '"✅ 成功"');—— 外层单引号是 JS 字符串，内层双引号是传给 CSS 的字符串字面量 - 如果变量值来自
attr()或计算属性（比如calc()），var()无法拼接或转换类型，content会直接丢弃无效值
和 attr() 比，var() 适合什么场景？
attr() 直接读 HTML 属性，简单粗暴；var() 更适合需要跨组件复用、响应式切换、或配合媒体查询/伪类动态生效的场景：
- 语言切换：
@media (prefers-language: zh) { :root { --label: "保存"; } }，再由content: var(--label);驱动 - 主题状态联动：当
.card.is-warning时，设置--card-icon: "❗";，所有子元素伪元素自动响应 - 避免 DOM 属性污染：不用往每个元素加
data-tip，统一靠继承的 CSS 变量控制 - 注意：CSS 变量作用域是级联的，父元素设
--x，子伪元素才能读到；直接在伪元素选择器里set不生效
JavaScript 修改后内容没更新？检查这三点
不是代码没跑，而是更新时机或作用域卡住了：
立即学习“前端免费学习笔记（深入）”；
- 确保目标元素是设置了
style属性的那个节点，而不是伪元素父容器的父级（例如改了body的--x，但伪元素在.item下，且.item没继承） - 检查浏览器是否支持：IE 完全不支持
var()在content中使用；Safari 15.4 之前对空字符串变量处理异常 - 别漏掉引号嵌套——这是最常被忽略的细节：
el.style.setProperty('--msg', '"Loading..."')是对的，'"Loading..."'或"Loading..."都会导致伪元素内容为空
content: var(--x);，而是让这个 --x 在正确的时间、正确的节点、以正确的字符串格式存在。引号、作用域、兼容性，三者缺一不可。 
