css变量不能直接用于content属性，因其仅支持string、attr()、counter()、counters()和url()五类值；var()在@media中也无法动态赋值，需预设多套变量并通过类名切换触发。
content: var() 在响应式文本替换中的实际限制
直接用 content: var(--text) 做响应式文本切换，看似简洁，但存在根本性约束：CSS 变量无法在媒体查询中“动态赋值”，@media 内部不能声明或修改 :root 变量。你只能预先定义多套变量，再靠类名切换触发，而不是靠断点自动更新。
常见错误是写这样的代码：
:root { --label-text: "Desktop"; }
@media (max-width: 768px) {
:root { --label-text: "Mobile"; } /* ❌ 无效：浏览器忽略 media 中的 :root 变量重定义 */
}
可行做法是：
- 为不同断点预设独立变量，如
--label-text-desktop、--label-text-mobile - 用类名控制生效变量，例如给
<label class="label--mobile"></label>添加对应样式规则 - 或通过 JS 监听
resize并调用document.documentElement.style.setProperty()动态更新
font-size: 0 + ::before 是最稳妥的视觉替换方案
想让文字“消失又换新”，font-size: 0 比 visibility: hidden 或 text-indent: -100vw 更可靠——它不破坏行高、不引发布局偏移、兼容所有现代浏览器（Chrome 49+、Firefox 31+、Safari 9.1+）。
关键细节：
-
font-size: 0必须配.label::before { font-size: 1rem }，不能用em（会继承 0 导致失效） - 若父容器字号频繁变化，建议用
height: 1.2em控制伪元素图标高度，而非固定像素 -
line-height: 0可加可不加；加了能防止某些字体残留微小基线偏移，但可能影响垂直居中对齐
响应式 SVG 替换需避开 content: url() 的尺寸陷阱
content: url(...) 插入 SVG 时，浏览器不会自动按容器缩放——它只按 SVG 文件内嵌的 width/height 渲染，或 fallback 到 100% 容器宽高（行为不一致）。
正确做法是：
- 在 SVG 源文件里显式声明
width="24" height="24"，并设viewBox - CSS 中统一用
width: 1.5em; height: auto，让 SVG 按字体大小等比缩放 - 避免在
::before上同时设width和height固定值，否则小屏下易拉伸失真 - 若 SVG 来自跨域 CDN，
content: url()会因 CORS 失败，此时改用background-image+padding-left更稳
无障碍与 SEO 风险常被忽略
纯 CSS 替换文本后，原始 HTML 文本仍在 DOM 中。屏幕阅读器大概率仍会读出它，而搜索引擎也可能索引旧文案——这不是 bug，是设计必然结果。
补救手段有限且需权衡：
- 加
aria-label覆盖语义，但仅适用于简单文本；复杂结构（如含链接的文案）无法用 aria-label 完整表达 - 用
aria-hidden="true"隐藏原文，但必须同步提供role="img"或aria-labelledby等替代语义 - 真正需要语义变更的场景（如按钮文案随状态切换），应优先用 JS 更新
textContent，CSS 只负责视觉降级兜底
最常被跳过的一步：没验证语音朗读顺序是否错乱，也没测过键盘焦点是否落在不可见的原始文本上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
