css的attr()函数仅支持html规范定义的全局属性（如title、alt），对data-自定义属性，仅safari 16.4+支持且需显式声明类型；chrome/firefox中content: attr(data-)静默失败。稳定替代方案是通过[data-*]选择器将值映射到css变量--var，再用var(--var)引用。
attr() 函数只能读取 HTML 属性，不能读取自定义属性的值
直接在 content 中用 attr(data-text) 看似合理，但实际无效——除非该属性是**HTML 规范中明确定义的全局属性**（如 title、alt），否则浏览器会返回空字符串或字面量 attr(data-text)。这是最常被误解的一点。
根本原因：CSS 的 attr() 在 CSS2.1 中仅定义为“用于生成内容”，且未规定对自定义属性（data-*）的支持；直到 CSS Values and Units Level 4 才明确允许 attr(data-*, <type>)</type>，但目前（截至 2024 年主流浏览器）仅 Safari 完全支持，Chrome / Firefox 仍只支持 attr(title) 这类内置属性，且不校验类型。
- Chrome 和 Firefox 中写
content: attr(data-label);→ 渲染为空白（不是报错，是静默失败） - Safari 16.4+ 支持
content: attr(data-label string);，但必须显式声明类型（string/url/color等） -
attr()返回值始终是字符串，无法自动转数字或布尔值
真正可行的替代方案：用 data-* 属性 + CSS 变量中转
绕过 attr() 限制的稳定做法，是把自定义属性值“映射”到 CSS 自定义属性（--var），再在 content 中用 var(--var) 引用。这需要 HTML 和 CSS 配合，但兼容性完美（IE11 不支持 CSS 变量，但现代项目基本已不考虑）。
示例：
<button data-tooltip="删除用户">?️</button> <button data-tooltip="编辑配置">✏️</button>
CSS 写法：
button::before {
content: var(--tooltip, "");
position: absolute;
background: #333;
color: #fff;
padding: 4px 8px;
font-size: 12px;
}
button[data-tooltip] {
--tooltip: attr(data-tooltip);
}
-
attr(data-tooltip)在属性选择器作用域内生效（即[data-tooltip]元素上），此时它被当作 CSS 变量的初始值，而非content直接调用 - 必须用
[data-tooltip]这类属性选择器触发变量赋值，不能只靠button通配 -
var(--tooltip, "")的 fallback（第二个参数）很重要，避免未设置data-tooltip时显示var(--tooltip)字符串本身
attr() 在伪元素中使用时的常见陷阱
即使你只用支持的属性（如 title），也容易掉进几个坑：
-
title属性值含换行或多余空格？attr(title)会原样输出，导致布局错乱 —— 建议先用 JS 清洗，或用white-space: nowrap+overflow: hidden控制显示 - 在
::before/::after中用attr()时，若父元素未设position: relative，绝对定位的提示框可能脱离预期位置 -
attr(href)返回的是相对 URL（如./page.html），不是完整地址；想拼接域名需 JS 处理，CSS 无能力解析 - Firefox 对
attr()的空值处理更严格：若属性不存在，attr(title)返回空字符串；而 Chrome 有时会回退到元素文本内容（非标准行为，不可依赖）
动态更新 data-* 属性后，CSS 能否自动响应？
不能。CSS 是静态声明，attr() 或 var(--x) 都不会监听 DOM 属性变化。比如 JS 执行了 el.setAttribute('data-tooltip', '已禁用')，对应伪元素内容不会刷新。
解决方式只有两种：
- 手动触发重绘：改完属性后，给元素加一个无意义的 class 再立刻移除（
el.classList.add('force-repaint'); el.classList.remove('force-repaint');） - 更可靠的做法：用 JS 直接操作伪元素内容 —— 但这已脱离纯 CSS 方案，需权衡是否值得
所以，如果 tooltip 文本需要频繁变更，别硬扛 CSS，老实用 JS + textContent 或模板字符串生成真实 DOM 节点更可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
