content属性在伪元素中仅可靠支持字符串字面量和attr()函数；写成"attr(data-tip)"会被当作文本渲染，正确写法是无引号的content: attr(data-tip)；attr()仅作用于content属性且不响应式，需js修改data-*属性并依赖重绘触发更新。
content 属性在伪元素中只有两种可靠用法：纯字符串字面量（带引号）和 attr() 函数调用；其他所谓“高级”功能要么不被主流浏览器支持，要么只是实验性语法，生产环境请绕道。
为什么 content: "attr(data-tip)" 会显示文字而不是取值
这是最常踩的坑：把 attr() 当作字符串拼接的一部分写进了引号里。CSS 会把它当作文本字面量渲染，真就显示“attr(data-tip)”五个字。
正确写法必须是 content: attr(data-tip) —— 没有外层引号，attr() 是 CSS 函数，不是字符串。
如果属性名拼错（比如写成 data-tooltip 但 HTML 里是 data-tip），或属性根本不存在，attr() 返回空字符串，不会报错也不会 fallback。
attr() 能用在哪些属性上？目前只认 content
MDN 和当前所有稳定版浏览器（Chrome 28+、Firefox 9+、Safari 13.1+、Edge 13+）都只正式支持 attr() 用于伪元素的 content 属性。
虽然 CSS Values Level 4 提出了新语法如 attr(bgcolor color) 或 attr(radius px, 4px)，但截至 2026 年 4 月，这些仍处于实验阶段：
• Chrome 需开启 chrome://flags/#enable-experimental-web-platform-features
• Firefox 不支持 type/fallback 参数
• Safari 完全不识别 type 和 fallback
所以别在上线项目里写 background-color: attr(bgcolor color)，它不会生效。
想动态更新 ::after 的内容？JS 必须介入
attr() 是声明时求值，不是响应式绑定。JS 修改了 dataset.tip 或调用 el.setAttribute('data-tip', '已粘贴')，伪元素不会自动刷新。
常见应对方式有三种：
• 切换 class 触发重绘：给元素加 class="tip-updated"，CSS 写 .tip-updated::after { content: attr(data-tip); }
• 替换整个伪元素：移除再添加一个带新 data-tip 值的同级元素
• 放弃伪元素，改用真实 <span class="tooltip-content"></span>，由 JS 直接更新 textContent
注意：CSS 自定义属性（--tip）无法被 attr() 读取，它只认 HTML 属性（data-*、title、alt 等真实存在于 DOM 树中的属性）。
真正难的不是怎么写 attr()，而是接受它“静态、单次、无容错”的本质——它不是 JS 模板引擎，也不该被当作状态容器用。需要动态、可维护、可测试的提示逻辑时，伪元素 + attr() 只适合固定文案场景，比如价格尾数、图标标识、静态标签。其余情况，老老实实交还给 JS 控制 DOM。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
