content属性仅对::before和::after伪元素生效，普通元素上使用无效；必须配合display属性才可见，且attr()只读取html attribute、不支持动态property修改或默认值fallback。
content属性必须用在伪元素上才能生效
直接给普通元素写 content 样式是无效的，浏览器会忽略。它只对 ::before 和 ::after 伪元素起作用。如果你发现值没显示出来，先检查是否漏写了伪元素选择器。
常见错误写法：.box { content: attr(data-label); } → 完全不生效
正确写法必须带伪元素：.box::after { content: attr(data-label); }
- 伪元素需配合
display（如block或inline）才可能可见，空内容或被父容器隐藏时也看不到 -
attr()只读取 HTML 属性（attribute），不是 DOM 属性（property）。比如input.value = "abc"不会影响attr(value)，它只认<input value="abc">这种初始 HTML 写法 - 若属性不存在，
attr(data-xxx)返回空字符串，不会报错也不会显示undefined
attr() 只支持字符串类型，数值和布尔值会自动转成字符串
attr() 没有类型转换能力，所有值都当字符串处理。比如 data-count="42" 会被当成文本 "42"，不能直接参与 CSS 计算（如 width: attr(data-count) px 是非法的）。
- 支持的属性名必须是合法的 HTML attribute，含连字符的要原样写，如
data-user-id→attr(data-user-id) - 不支持动态 JS 修改后的值：通过
el.setAttribute('data-status', 'active')设置后，::after能立刻更新；但el.dataset.status = 'active'同样有效，因为本质也是操作 attribute - IE 不支持
attr()的非content上下文（比如用在background里），且 IE8 及更早版本完全不支持attr()
content 中拼接 attr() 和固定文本要加引号
想显示 “ID: 123”，不能写 content: "ID: " attr(data-id) —— 这是语法错误。CSS 中字符串和 attr() 必须用空格隔开，且字符串需用引号包裹。
code.example::before {
content: "ID: " attr(data-id) " — active";
}
- 多个
attr()可并列，如content: attr(data-first) " " attr(data-last) - 如果属性值含空格或特殊符号（如
data-desc="A & B"），浏览器会原样输出，&不会自动解码，也不支持 CSS 里的转义 - 无法 fallback：没有类似
attr(data-title, "N/A")的默认值语法（CSS Level 3 尚未支持，默认值是 Level 4 提案，目前无主流浏览器实现）
用 attr() 实现简单状态提示时要注意可访问性
仅靠 ::after 输出的文字不会被屏幕阅读器自然读出，因为它不属于 DOM 流。如果该信息对理解内容关键（如表单必填项标记、错误状态），不能只依赖 content。
- 视觉上用
attr()显示状态（如data-state="error"→::after { content: "⚠️ Error"; }），同时应补上aria-live或aria-describedby等真实语义属性 - 不要用
attr()替代title或aria-label：前者纯展示，后者影响辅助技术 - 打印样式中
::before/:after默认不出现，如需打印，得额外加@media print { ... }并设content
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
