attr() 只读取伪元素所绑定元素自身的 data-* 属性字符串值，不监听变化、不继承样式、不校验合法性；常见错误包括选错宿主元素、拼写错误、引号误用及旧浏览器兼容问题。
content: attr() 读不到 data-* 属性怎么办
不是 HTML 写错了，就是 CSS 选错了宿主元素。attr() 只读当前伪元素挂载的那个元素自身的 data-* 属性，且只取字符串值，不解析 JS、不 fallback、不报错——读不到就是空字符串，页面上就啥也不显示。
常见错误现象：<button data-tip="提交"></button>，CSS 却写成 span::before { content: attr(data-tip); }，结果空白。因为伪元素绑在 span 上，不是 button。
- 检查属性名拼写：HTML 是
data-tip，CSS 就必须写attr(data-tip)；attr("data-tip")（带引号）是非法写法，直接失效 - 确认伪元素选择器是否精准匹配目标元素，比如想给所有带
data-icon的按钮加图标，就得写button[data-icon]::before - IE8 不支持连字符属性名，如
data-icon-name要改用data-iconname
content: attr() 插入的文本颜色/大小/对齐全失效
attr() 只管“塞什么进去”，不继承父元素样式，也不自动适配布局。content 值本身是纯字符串，没有语义、无 DOM 节点、不响应 color 或 font-size 继承——除非你显式设置。
比如 button::before { content: attr(data-tip); }，即使按钮有 color: #333; font-size: 14px;，伪元素文字仍按浏览器默认字体渲染，大概率小、灰、不对齐。
立即学习“前端免费学习笔记（深入）”；
- 必须手动设
color、font-size、font-family，尤其用图标字体时，font-weight和font-family缺一不可 - 想和文字垂直居中？
display: inline-block+vertical-align: middle最稳；用inline-flex也行，但需注意父容器white-space是否导致换行 - 避免意外撑高行距：
content: ""和content: " "（带空格）行为不同，后者会触发基线对齐计算，可能多出几像素高度
为什么 attr() 值变了，::before 却没更新
CSS 的 attr() 不监听属性变化，它只在样式计算时读一次值。JS 改了 data-tip，伪元素不会自动刷新——这不是 bug，是设计限制。
典型场景：按钮初始 data-tip="提交"，点击后 JS 执行 btn.setAttribute('data-tip', '已提交')，但 ::before 文字卡在“提交”不动。
- 唯一可靠响应方式：JS 修改属性后，强制触发重绘，例如
btn.style.willChange = 'content'（不推荐）或更稳妥地，切换一个无关 class 触发样式重算 - 高频交互别依赖
attr()动态文本，改用 JS 直接操作真实 DOM 节点，或用counter()配合counter-increment（适合序号类） - 真要 CSS 驱动状态变化，可用属性选择器组合：比如
button[data-state="success"]::before { content: "✓"; color: green; }，JS 只切data-state，CSS 控制内容
attr() 能读取 title、alt 这类原生属性吗
能，但有兼容性陷阱。标准支持 attr(title)、attr(alt)、attr(href) 等，但部分旧浏览器（如 IE9-）只认 data-* 自定义属性，且不保证返回值类型一致。
比如 img[alt]::after { content: " (" attr(alt) ")"; } 在 Safari 里可能返回空字符串，哪怕 HTML 中写了 alt="小狗"。
- 优先用
data-属性：语义明确、兼容性好、可读可控 - 原生属性值可能含空格、引号或特殊字符，
attr()原样输出，不转义——若用于生成 URL 或 CSS 值，可能引发解析错误 - 不要指望
attr(src)拿到图片路径再用作url()，content不支持嵌套函数，content: url(attr(src))是非法语法
真正难的不是写对 attr()，而是记住它既不监听、也不继承、还不校验——你给它一个属性名，它就默默读一个字符串，读不到不吭声，读到了也不告诉你它长什么样。调试时先看开发者工具里 getComputedStyle(el, '::before').content 返回什么，比猜更有用。
