attr() 仅在 content 属性中有效，其他css属性中使用会被忽略；其参数需规范书写，支持类型声明与fallback，但不触发重绘，动态更新须依赖js配合自定义属性。
attr() 只能在 content 属性里用，其他地方无效
很多人试过 attr(data-color) 传给 color 或 background-color，结果没反应——这是合法但被忽略的行为。CSS 规范明确限定 attr() 当前**仅在 content 属性中受支持**（包括 ::before 和 ::after），其余属性值里写它不会报错，但浏览器直接当无效值丢弃。
所以别在 color: attr(data-color); 这类地方浪费时间调试。真要动态控制样式，得换思路：用 CSS 自定义属性 + data- 属性配合 JS 同步，或用 attr() 配合 content 做文本/计数器/可访问性提示这类场景。
attr() 的基本写法和类型声明必须写对
attr() 至少要写两个参数：attr(属性名) 是最简形式，但推荐补全类型和 fallback：
-
attr(data-label)→ 返回字符串，无类型校验 -
attr(data-size px)→ 声明类型为px，浏览器会尝试转成长度值（但实际仍只用于content） -
attr(data-alt, "N/A")→ 第二个参数是 fallback 字符串，属性不存在时显示它 -
attr(data-id, "", string)→ 完整三参数：属性名、fallback、类型（string/url/ident/color/ 长度单位等）
类型声明不是强制转换器，只是提示；比如 attr(data-opacity number) 不会让浏览器把它当数字参与计算，content 里它还是以字符串形式拼接。
伪元素中用 attr() 显示数据，但要注意空格和编码
常见需求是把 data- 值显示在 ::after 里，比如按钮加状态标签：
.btn {
position: relative;
}
.btn::after {
content: attr(data-status);
font-size: 0.7em;
opacity: 0.8;
}
注意几个坑：
- 如果
data-status="已提交"，中文没问题；但若含双引号、反斜杠或换行，会被原样输出，可能破坏布局 -
attr()不做 HTML 转义，data-tip="<script>"</script>会直接渲染成文字<script></script>，不会执行，但可能影响语义 - 属性值前后空格会被保留，
data-value=" yes "渲染出来就是带空格的" yes "，需要用 JS trim 后再设属性
attr() 无法触发重排重绘，也不响应属性变更
这是最容易被忽略的一点：attr() 是静态求值——元素插入 DOM 时读一次，之后改 data- 属性，::before 的 content **不会自动更新**。
验证方式很简单：
- 页面加载后，手动在 DevTools 里改元素的
data-count值 - 看
::after内容是否变化 —— 绝大多数情况下不会变
要实现动态更新，必须靠 JS 主动操作：要么重新设置 content（不现实），要么切换 class 触发重绘，或者干脆放弃 attr()，改用 data- + style.setProperty() 控制自定义属性，再在伪元素里用 var(--status)。
真正能“动态”的，从来不是 attr()，而是你用 JS 控制的节奏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
