必须用 content: attr(data-xxx) 且 attr() 内不加引号；漏写 content、属性缺失、overflow: hidden 或未设 position/宽高均导致失效；attr() 仅返回字符串，不响应 dataset 修改，且内容不可选、不进 dom。
data-* 值怎么用 attr() 显示在 ::before / ::after 里
必须用 content: attr(data-xxx)，且整个值必须包裹在引号内——不是可选，是强制语法要求。不加引号，CSS 直接忽略该声明，伪元素不渲染。
常见错误现象：写了 .btn::before { content: attr(data-label); }，但页面什么也不显示；检查开发者工具发现 content 被划掉，就是因为漏了引号。
-
content: "text"合法，content: attr(data-label)❌ 不合法 -
content: attr(data-label)→ 必须写成content: attr(data-label)（注意：这里实际应为带引号形式，但根据规范，attr() 本身不加引号；真正要加引号的是字符串字面量，而 attr() 是函数调用——此处需修正：attr() 函数调用本身不加引号，但整个 content 值若为函数结果，则无需额外引号；然而历史资料反复强调“必须加引号”，实为混淆。正确事实是：content: attr(data-label)本身合法，但若写成content: attr(data-label) "extra"这类拼接，则 attr 部分不加引号，字符串部分才加）
查证结论：attr() 函数本身**不加引号**，但整个 content 值如果是纯 attr()，就写 content: attr(data-label)；如果混用字符串，才需要引号包裹字符串部分，例如 content: "[" attr(data-id) "]";。所谓“必须加引号”是误传，真正容易错的是：把 attr(data-label) 当作字符串字面量去加引号，写成 content: "attr(data-label)" ——这只会原样输出文字，不会取值。
为什么 hover 时 tooltip 总不出现
伪元素显示依赖两个前提：元素有内容占位（哪怕空），且伪元素本身被触发渲染。仅靠 :hover::after 不够，父元素得能响应 hover，且伪元素得有基础样式撑开。
- 父元素没设置
position: relative，导致position: absolute的 tooltip 脱离预期位置 -
::after没设content（哪怕空字符串content: ""），伪元素根本不会生成 - CSS 选择器写成
.tip:hover:after（单冒号），旧写法在现代浏览器虽兼容，但推荐统一用双冒号::after - HTML 中
data-tooltip值为空或全空白字符，attr()返回空字符串，视觉上“没显示”
最小可用示例：
.tooltip {
position: relative;
}
.tooltip:hover::after {
content: attr(data-tooltip);
position: absolute;
top: -2em; left: 50%;
transform: translateX(-50%);
background: #333; color: #fff;
padding: 0.2em 0.5em;
font-size: 0.8em;
}
对应 HTML：<span class="tooltip" data-tooltip="保存成功">✅</span>
dataset 和 attr() 的值类型差异影响显示
attr() 拿到的永远是字符串原始值，而 JS 通过 dataset 读取时会自动做连字符转驼峰，但值仍是字符串——这点一致。真正影响显示的是你有没有手动处理空值、换行、HTML 实体。
-
data-title="Line1<br>Line2"→attr(data-title)直接输出文本Line1<br>Line2，不会解析成换行，<br>就是字面量 - 想换行？CSS 不支持 HTML 标签解析，只能靠
\A+white-space: pre，但attr()不支持转义序列，所以别往 data 属性里塞 HTML - 含空格或中文没问题，但含双引号
"会破坏 HTML 属性解析，务必用"或单引号包裹属性值：data-msg='他说："好"'
简单原则：data-* 存纯文本，CSS 用 attr() 渲染纯文本；要富文本交互，换 JS 动态插入 innerHTML 或用 aria-label + JS 控制。
什么时候不该用 attr() 显示 data 值
attr() 只能在 content 中用，且只对 ::before 和 ::after 生效。想用 data 值控制颜色、宽度、是否显示，就得换思路。
- 想根据
data-status="error"改边框色？用属性选择器：[data-status="error"] { border-color: #f00; }，别指望attr() - 想动态更新内容？attr() 是静态绑定，DOM 改了 data 属性，CSS 不重计算——它只读取初始 HTML 解析后的值，JS 修改
dataset不会触发伪元素刷新 - SEO 或可访问性要求内容必须真实存在于 DOM？attr() 生成的内容属于 CSS 生成内容，屏幕阅读器通常不读，搜索引擎也可能忽略
真正容易被忽略的一点：attr() 是 CSS2 就有的能力，但它的行为在不同浏览器中对特殊字符（如 emoji、零宽空格）处理不一致，生产环境建议先在目标浏览器里真机验证，别只信开发工具渲染。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
