attr() 必须配合 ::after 或 ::before 伪元素使用，仅读取 html attribute（如 data-*、title），不响应 js 修改的 property 值；直接在普通元素上声明 content 会被忽略。
content: attr() 必须配合 ::after（或 ::before）伪元素使用，且仅读取 HTML attribute（如 data-*），不响应 JS 修改的 property 值；常见失效原因是漏写伪元素、没设 display 或误读 DOM 属性。
为什么直接写 .el { content: attr(data-label); } 不显示？
因为 content 属性在标准 CSS 中**只对伪元素生效**。普通元素上声明会被浏览器完全忽略，连报错都不会有。你看到“没效果”，大概率是忘了加 ::after 或 ::before。
- ❌ 错误：
.tooltip { content: attr(data-tip); }→ 无效，无任何渲染 - ✅ 正确：
.tooltip::after { content: attr(data-tip); }→ 内容出现在元素末尾 - ⚠️ 注意：即使内容为空，也必须显式写
content: ""，否则伪元素不会创建
attr() 能读哪些属性？data- 和 title 都行，但 value 和 dataset 不行
attr() 只抓取 HTML 源码中写的 attribute 值，不是运行时 JS 设置的 DOM property。比如 <input data-id="123" value="init">：
-
attr(data-id)→ 返回"123"（合法，推荐） -
attr(title)→ 返回title属性值（合法，非data-也可） -
attr(value)→ 返回初始value属性值（如"init"），但input.value = "new"后它**不会更新** -
attr(data-status)+el.dataset.status = "active"→ 仍有效，因为dataset修改本质是同步操作 attribute
多个 data- 属性冲突时，::after 只能显示一个 content
CSS 中同一个伪元素的 content 只能有一个最终值。如果写了两条规则都试图控制 ::after 的 content，后定义或更高优先级的会覆盖前者：
- ❌ 失效写法：
[data-error]::after { content: attr(data-error); }和[data-error-1]::after { content: attr(data-error-1); }→ 后者总会覆盖前者 - ✅ 可行做法：统一用一个属性名，比如
data-error-text，由 JS 动态设置其值：el.setAttribute('data-error-text', '用户名已存在'); - ✅ 进阶控制：用布尔类名切换，如
.has-error::after { content: attr(data-error); }+.has-warning::after { content: attr(data-warning); }，确保互斥
显示异常？检查 display、空格和父容器隐藏
::after 默认是 inline，且内容为空或被父容器裁剪时根本看不见：
- 若需宽高/定位/换行，必须显式设
display: block、inline-block或flex -
content: attr(data-tip)中的前后空格、换行符会被压缩，要保留格式得用\a并配white-space: pre - 父元素若设了
overflow: hidden或position: relative但未留出空间，::after可能被截断或压扁 - 伪元素默认透明度为 1、无背景色，若文字颜色与背景同色，看起来就像“没显示”
真正容易被忽略的是：attr() 返回值永远是字符串，哪怕原始属性是数字或布尔值；它不能拼接、不能计算、也不能 fallback —— 属性不存在就返回空字符串，连 undefined 都不显示。想做复杂逻辑，得靠 JS 预处理好完整字符串再塞进 data- 属性里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
