不能。content属性不支持var()函数，直接使用会失效；需通过data-*属性配合attr()实现，或改用JavaScript动态设置textContent更可靠。
content属性能直接显示CSS自定义属性的值吗
不能。content 属性只接受字符串字面量、attr() 函数或 counter() 等特定函数，不支持 var()。写成 content: var(--msg); 会直接失效，最终渲染为空（或回退到默认值），浏览器控制台也不会报错，容易误以为“没生效”而不是“语法不支持”。
想用content展示变量内容，必须绕道attr() + data-*属性
这是目前唯一稳定可行的方案：把变量值同步写进 HTML 的 data- 属性，再用 attr() 读取。注意两点关键约束：
-
data-属性值始终是字符串，存对象/数组需先JSON.stringify()，读取后需JSON.parse()（若需还原结构） -
attr(data-msg)只能读取元素自身拥有的data-msg，不能继承或从父级获取 —— 所以变量得在每个需要展示的元素上显式设置 - 若内容含双引号，HTML 中建议用单引号包裹整个属性值，例如：
data-msg='{"text":"He said \"Hi\""}'
示例：
<div class="tip" data-msg="⚠️ 注意：请检查网络连接"></div>
<style>
.tip::before {
content: attr(data-msg);
color: #e67e22;
}
</style>
为什么不用JavaScript动态插入？更简单还更可控
如果目标只是“显示一段可变文本”，纯 CSS 方案反而增加耦合和维护成本。JS 直接操作 textContent 或 dataset 更直观：
- 避免 HTML 和 CSS 之间隐式同步（比如 JS 改了
data-msg，但忘了触发重绘或依赖伪元素） - 支持运行时计算、条件拼接、国际化等逻辑，
content完全做不到 - 调试友好：DOM 中能直接看到最终值，而
::before内容在开发者工具里不显示为真实节点
简例：
const el = document.querySelector('.tip');
el.dataset.msg = '✅ 已连接';
el.textContent = el.dataset.msg;
真正适合CSS自定义属性的场景是样式控制
--primary-color、--spacing-xs、--radius-md 这类用于控制颜色、尺寸、圆角等视觉参数的变量，才是 var() 的主战场。它们天然符合「声明一次、多处引用、响应式切换」的需求。一旦试图让 CSS 变量承担「内容数据」角色，就会撞上 content 不支持、无法条件判断、无类型保障等硬限制。
复杂点在于：很多人混淆了「CSS 自定义属性」和「HTML data-* 属性」的职责边界 —— 前者管“怎么画”，后者管“画什么”，混用只会让数据流变模糊，出问题时难以定位是 JS 没更新 data，还是 CSS 选择器错了，还是 attr() 拼写漏了括号。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
