<p>content: attr() 在 Chrome/Firefox 中不支持 data- 属性，仅 Safari 16.4+ 支持 attr(tip string)；跨浏览器稳定方案是用 CSS 变量中转，如 --tip: '保存成功' 配合 content: var(--tip)。</p>
直接用 content: attr(data-xxx) 在伪元素里显示动态文本，看似一步到位，但 Chrome 和 Firefox 里大概率不生效——不是你写错了，是浏览器根本没打算支持它。
为什么 content: attr(data-tip) 在 Chrome/Firefox 里不显示
因为 attr() 的参数不是照抄 HTML 属性名。写成 attr(data-tip) 是错的：CSS 规范要求去掉 data- 前缀，且不能加引号；正确写法是 attr(tip)，对应 HTML 中的 data-tip="值"。但问题在于，Chrome/Firefox 当前（2026 年）只认标准全局属性（如 title、alt），对任何 data- 属性都静默忽略。只有 Safari 16.4+ 开始支持 attr(tip string)，还必须显式声明类型。
- ❌
content: attr(data-tip)—— 属性名带data-，语法上就无效 - ❌
content: attr("tip")—— 引号让浏览器当字面量处理，输出就是 "tip" 两个字符 - ✅
content: attr(tip)—— 名字对、无引号，但仅 Safari 支持
跨浏览器稳定方案：用 CSS 变量中转
绕过 attr() 的兼容性陷阱，把 data- 值提前注入到 CSS 自定义属性里，再用 var(--tip) 读取。这是目前最可控、无 JS 依赖（也可配合 JS 动态更新）的落地方式。
- HTML 中保留原始属性：
<button data-tip="保存成功">保存</button> - 服务端渲染或 JS 注入时同步写入 style：
<button data-tip="保存成功" style="--tip: '保存成功'">保存</button> - CSS 中直接使用：
button::after { content: var(--tip); } - 如果不想改 HTML，可用属性选择器批量映射：
[data-tip] { --tip: attr(tip); }，但这句本身在 Chrome/Firefox 里仍无效，所以不推荐作为主方案
content: attr() 的真实能力边界
别指望它“动态响应”——它只是样式计算那一刻的快照。JS 修改了 dataset.tip，伪元素内容不会自动刷新；它也不能拼接字符串、参与 calc()、加空格或 fallback，默认就是原样输出。
立即学习“前端免费学习笔记（深入）”；
- 空值处理：
data-tip=""→ 输出空字符串，不会 fallback 到默认文案 - 中文和特殊字符：
data-desc="超轻·2024款"→attr(desc)原样输出，无需 URL 编码 - 换行符：
\n会被真实渲染为换行，可能意外撑开高度 - 不可用于布局：
div::before { width: attr(data-width px); }→ 完全无效，attr()只能在content里用
真正容易被忽略的是：当你用 JS 更新 data- 属性后，以为伪元素会跟着变，其实它早就“拍完照”了。要让它动起来，得靠强制重绘（比如 toggle class、触发 offsetHeight）或者换用 CSS 变量 + JS 同步——后者才是现代项目里真正可维护的做法。
