content: attr()仅静态读取HTML属性值并原样渲染，不响应JS动态更新；需配合JS修改data-*属性并触发重绘才能实现“动态”效果。
content 属性本身不能直接“动态插入属性值”，它只能配合 attr() 函数读取 HTML 元素的已有属性，并原样渲染为文本——这是静态读取，不是 JS 那种运行时动态更新。
content: attr() 只能读取已存在的属性值
浏览器在解析 CSS 时，attr(data-label) 会一次性提取元素当前的 data-label 属性字符串，之后即使 JS 修改了该属性，伪元素内容也不会自动刷新。这不是 bug，而是规范行为。
- ✅ 支持的属性：任何 HTML 元素上的标准或自定义属性（如
title、data-id、alt），但不支持class或style - ❌ 不支持表达式：不能写
attr(data-price) " 元"拼接字符串（CSS 不允许字符串拼接） - ⚠️ 空值处理：若属性不存在或为空，
attr()渲染为空字符串，不会报错也不会 fallback
常见用法与典型错误
最常用于辅助信息展示，比如链接提示、图片说明、状态标记。但容易忽略属性名大小写和引号问题。
- HTML 中属性名是大小写敏感的：
data-label和data-Label是两个不同属性 - CSS 里
attr()参数不加引号：content: attr(data-title)✅，content: attr("data-title")❌（语法错误） - 如果想显示 URL，别用
href（可能含特殊字符导致截断），优先用data-url自定义属性
想“动态”？得靠 JS 配合
真要响应属性变更，必须用 JS 主动触发重绘——比如修改 data- 属性后，强制 toggle 一个 class 触发伪元素重计算，或用 offsetHeight 强制回流。
立即学习“前端免费学习笔记（深入）”；
- 简单方案：JS 改完
el.dataset.label = "new"后，执行el.style.display = 'none'; el.offsetHeight; el.style.display = ''; - 更稳妥方式：用
MutationObserver监听属性变化，再手动替换伪元素对应的真实 DOM 节点（因为伪元素不可选中） - 注意：所有这些变通都绕不开一个事实——
content: attr()本质是静态快照，不是响应式绑定
真正容易被忽略的是：当你以为 attr() 能“活”起来时，其实它只在样式计算那一刻取值；后续 DOM 变更对它完全透明。这点和 Vue 的 {{ }} 或 React 的 {prop} 有根本区别。
