能，但必须满足三个硬性条件：只用于::before或::after、属性名不带data-前缀、html中该属性真实存在；content:attr(label)才生效，attr(data-label)因找不存在的属性而静默失败，且attr()只读attribute不响应dataset修改。
能，但必须满足三个硬性条件：只用于 ::before 或 ::after、属性名不带 data- 前缀、HTML 中该属性真实存在。
为什么 content: attr(data-label) 不生效？
最常见原因是写错了属性名。CSS 的 attr() 函数参数是“属性本地名”，不是完整 HTML 属性名：
✅ 正确写法：content: attr(label) 对应 data-label="已读"
❌ 错误写法：content: attr(data-label) —— 浏览器会去找名为 data-label 的属性，找不到就静默忽略
❌ 也错误：content: attr("label") —— 引号会让它变成字面量字符串，不是属性读取
attr() 只读 attribute，不响应 JS 的 dataset 修改
即使你用 JS 写了 el.dataset.status = "done"，::after 也不会更新内容。因为：
• dataset 是 DOM property，attr() 只监听 HTML attribute 变更
• 必须用 el.setAttribute('data-status', 'done') 才能触发重绘
• 某些优化场景（如 will-change: contents）可能延迟 1 帧才显示新值
• 缺失属性时返回空字符串，不是 undefined，也没有 fallback 机制
伪元素不显示的隐藏原因
即使 content: attr(label) 写对了，也可能“看不见”：
• 普通元素上直接写 .el { content: attr(label); } → 完全无效，浏览器忽略
• 伪元素默认 display: inline，若父容器有 overflow: hidden 或未设 position: relative，可能被裁剪
• 没显式声明 content: "" 时，伪元素根本不会创建（哪怕只为了占位）
• content 值为空格或纯空白符时，会被 CSS 渲染引擎压缩成单个空格，视觉上像没内容
真正容易被忽略的是：attr() 返回的永远是字符串，哪怕 data-count="42"，拿到的也是 "42" —— 它不能进 calc()，不能参与颜色计算，也不能自动转布尔值做条件判断。所有“动态逻辑”都得靠 JS 改 attribute 来驱动，CSS 只负责静态快照。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
