用 ::after 读取 data- 属性必须用 attr()，如 content: "提示：" attr(data-tip)；漏写 attr() 或语法错误会导致伪元素不显示且无报错；attr() 仅支持字符串、不自动加空格标点、不支持多属性拼接或过渡动画。
用 ::after 读取 data- 属性必须用 attr()
纯 CSS 无法“计算”或“拼接”字符串，但 attr() 函数可以原样提取 data- 属性值并作为伪元素内容。这是唯一合法方式，写成 content: "提示：" attr(data-tip); 才有效；如果漏掉 attr() 或写成 content: data-tip;，浏览器直接忽略该声明。
常见错误现象：::after 完全不显示、控制台无报错、开发者工具里 content 显示为 unset。
-
attr()只支持字符串值，不支持数字或布尔类型（即使写了data-count="42"，取出来也是字符串"42"） - 属性名不加
data-前缀，例如attr(data-tip)，不是attr(tip)或attr("data-tip") - 若属性不存在，
attr()返回空字符串，不会报错，但内容为空——容易误以为样式失效
content 中的引号和空格要手动加
attr() 只输出原始值，前后不会自动补空格或标点。比如想显示 “提示：加载中”，而 data-tip="加载中"，就必须写成 content: "提示：" attr(data-tip);，少一个空格就会变成“提示：加载中”紧贴在一起。
使用场景中常需组合固定文案与动态数据，例如状态提示、单位标注、来源标识：
- 带单位：
content: attr(data-value) "px";→data-value="16"渲染为16px - 带图标前缀（配合字体图标）：
content: "ⓘ " attr(data-hint); - 多属性拼接不可行——CSS 不支持多个
attr()，也不能用+或模板字符串
动态更新依赖 DOM 属性变更，不触发重绘时无效
当 JS 修改 element.dataset.tip = "新提示" 或 element.setAttribute("data-tip", "新提示")，::after 内容会立即更新——前提是该元素已渲染且伪元素样式生效。但以下情况会失败：
- 元素初始没有
data-tip，后来才加上：需要确保 CSS 规则本身已存在（不能靠 JS 动态注入 style 标签再加规则） - 使用
innerHTML替换整个元素内容：旧元素被销毁，新元素需重新带data-属性，否则::after消失 - 属性值相同（如重复设为
"loading"），部分浏览器可能跳过重绘，视觉上像没更新 - 不要试图用
transition过渡content——它不支持动画，改了也没反应
兼容性与 fallback 要留意
attr() 在 content 中的支持度很好（Chrome 2+、Firefox 1.5+、Safari 3.1+、Edge 12+），但老 IE 完全不支持。如果项目还需兼容 IE11，就得用 JS 插入真实元素替代。
性能上几乎无负担，但别滥用：每个 ::after 都要走一遍属性读取和布局，大量 tooltip 类型提示建议用 title 属性或轻量 JS 方案更可控。
容易被忽略的一点：伪元素默认是 inline，若 data- 值含空格或换行，显示会折行或撑开高度——必要时加 white-space: nowrap; 或 display: inline-block; 控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
