attr()在伪元素中“看似可用”实则脆弱，因其仅静态读取html属性值、不响应变更、不支持拼接或计算，且移动端webkit解析不稳定；可靠方案是改用css变量+js动态控制。
移动端直接用 attr() 在伪元素中显示动态内容，基本不可行——它只读取 HTML 属性值，且不触发重排/重绘，更不支持表达式或 JS 响应式更新。
为什么 attr() 在伪元素里“看起来能用”但实际很脆弱？
attr() 确实允许你在 ::before 或 ::after 中写 content: attr(data-label)，但它的行为有硬限制：
- 仅支持 HTML 元素的**字符串属性值**（如
data-*、title、alt），不支持class、id的计算结果 - 值变更后，
attr()**不会自动刷新**——改了dataset.label或setAttribute('data-label', 'new')，伪元素内容不变，除非强制重绘（比如 toggle class、修改content本身） - 移动端 WebKit（iOS Safari）对
attr()的兼容性看似 OK，但遇到空格、换行、特殊字符时解析不稳定，尤其在缩放或横竖屏切换后容易丢内容 - 不能和
calc()、var()混用，也不能做拼接：content: 'ID:' attr(data-id) ' / ' attr(data-status)是无效语法（CSS 不支持多attr()拼接）
真正能在移动端稳定显示动态伪元素内容的替代方案
放弃 attr() 直接驱动，转而用 CSS 变量 + JS 控制，是目前最可靠路径：
- HTML 中保留
data-属性用于初始状态或降级 fallback，但不依赖它渲染 - JS 修改元素的
style.setProperty('--label-text', newValue) - CSS 写
content: var(--label-text, 'default');—— 这个变量更新会实时触发伪元素重绘 - 注意：必须给元素显式声明
display: inline-block或类似值，否则某些 iOS 版本下content变更可能不生效
示例：
<span class="badge" data-label="loading"></span>
JS：
const el = document.querySelector('.badge');
el.style.setProperty('--label-text', 'done');
CSS：
.badge::after {
content: var(--label-text, '—');
display: inline-block;
}
什么时候可以勉强用 attr()？
仅限以下场景，且需加防御性处理：
- 内容完全静态，初始化后永不变更（如图标旁固定说明文字）
- 配合 MutationObserver 主动监听
data-属性变化，并手动触发重绘（比如切换一个无意义的 class） - 降级兜底：当 JS 不可用时，靠
attr()显示默认值；JS 启用后立即接管并切换为var()方案 - 务必过滤输入：
el.setAttribute('data-label', String(value).replace(/\s+/g, ' ').trim())，避免空格导致 iOS Safari 解析失败
真正麻烦的不是写法，而是你改了 data-label 却发现界面上啥都没变——这时候得想起：CSS 的 attr() 不是响应式 API，它只是快照。别把它当 React 的 {label} 用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
