CSS的content属性配合attr()函数是唯一能在伪元素中读取并显示HTML属性值的原生方式，仅支持::before和::after，返回空字符串而非undefined，不支持计算、fallback或CSS变量，推荐使用data-*属性以确保语义与兼容性。
content属性里用attr()函数直接读取HTML属性值
CSS的content属性配合attr()函数，是唯一能在伪元素中“读取并显示”HTML属性值的原生方式。它不支持计算、拼接或 fallback，默认返回空字符串（不是undefined或null），且仅限于::before和::after伪元素。
常见错误：写成content: attr(data-title)但元素没带data-title属性，结果显示为空白——这很正常，attr()不会报错，也不会降级显示其他内容。
-
attr()只接受单个属性名，不能写attr(data-id data-class)或attr(title, "default") - 属性值会原样输出，包括空格、换行符；若需处理，必须在HTML中预清理（如用
data-label="Item 1"而非data-label=" Item 1 "） - 不支持CSS变量、表达式或函数嵌套，
attr(--color)或attr(data-count + 1)均无效 - 浏览器兼容性好（Chrome 2+、Firefox 1.5+、Safari 3.1+），但IE8及以下不支持伪元素的
content，更不用说attr()
attr()读取自定义data-*属性最安全
用data-前缀属性是标准做法，语义清晰且无冲突风险。比如给按钮加提示：，对应CSS：
button::after {
content: attr(data-tooltip);
opacity: 0.7;
}
如果误用非data-属性（如title），虽能工作，但存在隐患：某些框架或辅助工具会监听title做tooltip逻辑，CSS读取可能干扰其行为；而id、class等属性值含空格或特殊字符时，attr(class)会把整个类列表当字符串输出（如"btn primary large"），通常不是你想要的。
- 优先选
data-属性，命名保持小写+短横线（data-user-id），避免驼峰或下划线 - 避免读取
style、onclick这类内联事件/样式属性——值可能含分号、引号，导致content渲染异常 - 服务端渲染或JS动态写入属性后，
attr()会实时响应，无需手动刷新CSS
attr()无法处理缺失值？用JS补位更可控
attr()对缺失属性返回空字符串，没有fallback机制。想实现“有值显示，无值显示默认文案”，纯CSS做不到。例如希望data-label为空时显示"未命名"，必须借助JS：
document.querySelectorAll('[data-label]').forEach(el => {
const label = el.getAttribute('data-label') || '未命名';
el.style.setProperty('--label-fallback', `"${label}"`);
});
再配合CSS变量：
[data-label]::after {
content: attr(data-label) " / " var(--label-fallback);
}
注意：上面写法实际仍会显示两遍（因为attr()为空时输出空字符串，var()才生效），真正可靠的方式是JS直接写data-属性值，确保它始终存在。
- 不要依赖
attr()做条件判断，CSS无if逻辑 - 若项目已用React/Vue，更推荐在组件层控制属性是否渲染，而非靠CSS兜底
- SSR场景下，确保服务端也注入了默认
data-值，否则首屏可能空白
attr()在打印样式或无障碍场景中不可见
attr()生成的内容属于CSS生成内容（generated content），它不进入DOM树，无法被屏幕阅读器朗读，也不会出现在打印预览或innerText中。例如：
<span data-desc="重要通知">⚠</span>
span::after { content: attr(data-desc); }
视觉上显示“⚠ 重要通知”，但盲人用户用读屏软件聚焦该span时，只会听到“⚠”，听不到“重要通知”。同样，用户复制这段文字，也只复制到“⚠”，后面内容不会被选中。
- 关键信息必须放在HTML文本节点中，
attr()仅适合装饰性、辅助性文本（如单位px、图标说明） - 若需兼顾可访问性，用
aria-label或aria-describedby同步提供相同信息 - 打印样式表中，
attr()内容默认可见，但若父元素设了display: none，伪元素也会消失——这点常被忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
