attr() 在 ::after 中仅支持读取 HTML 属性（如 data-*），不支持 CSS 自定义属性；值原样输出，不解析 HTML 实体、不压缩空格、不处理换行，且属性名须严格匹配。
attr() 在 ::after 里只能读 data-\* 属性，不能读自定义 CSS 属性
直接说结论：attr() 函数在 ::after（或 ::before）伪元素中，**只支持读取 HTML 元素的属性值（attribute），且仅限于字符串类型**。它完全无法访问 CSS 自定义属性（即 --my-color 这类）。想动态显示 data-\* 内容，必须确保属性真实存在于 HTML 标签上，且名字拼写、大小写、连字符都严格匹配。
常见错误是把 data-label="提交" 写成 data-label='提交 '（末尾空格）或 dataLabel="提交"（驼峰写法），attr(dataLabel) 就会返回空字符串——浏览器不会做任何转换或容错。
-
attr(data-label)✅ 对应<button data-label="确认"> -
attr(datatooltip)❌ 即使写了data-tooltip="提示"，也因名称不一致失效 -
attr(style)❌ 虽然style是合法 attribute，但它的值是内联样式字符串，通常无实际展示意义
data-\* 属性值含空格、引号、HTML 实体时要特别小心
attr() 原样输出属性值，不做 HTML 解码或空格压缩。如果 data-desc="前端 & 后端"，::after { content: attr(data-desc); } 渲染出来就是字面量 前端 & 后端，不是“前端 & 后端”。同理，data-title="hello world" 会保留全部三个空格。
更隐蔽的问题是换行：若属性值里有回车（比如服务端模板渲染时没 trim），attr() 会把换行符当普通字符插入，可能破坏行高或触发意外折行。
立即学习“前端免费学习笔记（深入）”；
- 服务端/JS 注入
data-\*值前，务必.trim()并用encodeURIComponent或 HTML 转义处理特殊字符（如&,",） - 纯 CSS 场景下，避免依赖
attr()显示富文本；它只适合简单标签、状态标识等短文本 - 需要转义效果？得靠 JS 动态设置
textContent或用data-+content配合text-overflow等 CSS 控制
attr() 不触发重排重绘，但也不响应 DOM 变更
attr() 是静态求值：元素插入 DOM 时读一次，之后就算你用 JS 改了 dataset.xxx 或 setAttribute('data-xxx', 'new')，::after 的内容**不会自动更新**。这是最容易被忽略的限制。
- 用
el.dataset.label = '已发送'→ 无效，伪元素不变 - 用
el.setAttribute('data-label', '已发送')→ 有效，但仅限于首次设置后未修改过的元素（部分旧版 Safari 甚至不支持动态更新） - 真正可靠的方案：改 class 触发不同
content，或用 JS 直接操作伪元素的content（不可行）→ 实际只能删掉伪元素，用真实元素替代
替代 attr() 的轻量级动态方案：CSS 变量 + 自定义属性监听
如果真需要响应式更新文本，又不想引入框架，可以绕过 attr()，用 CSS 自定义属性 + JS 监听：
button {
--data-label: '默认';
}
button::after {
content: var(--data-label);
}然后 JS 中：
btn.style.setProperty('--data-label', JSON.stringify('已提交'));注意两点：一是 var() 中的字符串值必须用单/双引号包裹（否则解析为关键字），所以要用 JSON.stringify() 保证引号正确；二是该方式兼容性较好（Chrome 49+、Firefox 31+、Safari 9.1+），但 IE 完全不支持。
复杂点在于：CSS 变量继承和作用域容易出错，比如父元素设置了 --data-label，子元素没覆盖，就可能显示错值；另外，JSON.stringify() 对中文没问题，但对含单引号的字符串（如 O'Reilly）会产生嵌套引号问题，需额外清洗。
