css变量值不带外层引号，--my-str: "hello" 存的是含引号字符串，导致 content: var(--my-str) 语法错误；base64不可通过var()在content中解析；长中文/特殊字符需注意空格合并与转义，正确写法可支持万字符级纯文本。
直接用 --long-str: "很长的字符串" 是可行的，但必须避开引号嵌套、Base64误用、转义遗漏这三类高频翻车点。
为什么 content: var(--my-str) 有时显示为空或带多余引号？
CSS 变量值本身不带外层引号——写成 --my-str: "hello"; 实际存的是带双引号的字符串 "hello"，不是 hello。后续在 content 中调用时，浏览器会把它当字面量拼进去，结果变成 content: ""hello""，语法非法，直接失效。
- 正确写法是去掉外层引号：
--my-str: Hello world!;（空格、感叹号、中文都合法） - 需要输出带引号的文本时，必须在变量值内部转义：
--quote: "他说："今天真好""; - 若变量值含单引号，用
'转义；含反斜杠，写成\
content 里能用 var(--base64) 插入 Base64 图片吗？
不能。即使变量存了完整 url(data:image/svg+xml;base64,PHN2Zy...)，content: var(--icon) 也只会输出该字符串字面量，浏览器不会解析其中的 url() 函数，更不会解码渲染。
- 现象：DevTools 显示
content: "url(data:image/svg+xml;base64,...)"（带双引号），图片不出现 - 替代方案：SVG 图标优先用
content: url("data:image/svg+xml;base64,...")直写，不走变量 - 若必须动态切换，改用 JS 设置
element.style.content，或通过attr()+data-*属性传值
长中文/特殊字符字符串在 content 中如何安全使用？
中文、emoji、Unicode 符号本身无需额外处理，但要注意换行、空格和不可见字符是否被意外截断或压缩。
- CSS 变量值中的连续空格会被合并为一个空格（符合 CSS 规范），如需保留，用
A0） - 超长字符串建议拆成多段变量拼接：
--part1: 前半段；--part2: 后半段；content: var(--part1) var(--part2); - 避免在变量中直接塞大量 HTML 实体（如
&），content不解析实体，会原样输出
真正容易被忽略的不是长度限制，而是变量值“是否被当作裸字符串处理”——只要外层没引号、内部转义正确、不混用 url() 语义，万字符级别的纯文本也能稳稳落到 ::before 里。但一旦加了引号或试图让 CSS 解析 Base64，就立刻掉出预期轨道。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
