attr()仅在::before/::after的content中有效，且chrome/firefox不支持data-属性，需用attr(tip)对应data-tip="值"，safari 16.4+才支持；跨浏览器推荐css变量中转：style="--tip: '值'" + content: var(--tip)。
直接用 attr() 读取 data- 属性在伪元素中显示文本，看似简单，但 Chrome/Firefox 下大概率静默失败——不是 bug，是规范限制。
为什么 content: attr(data-tip) 在 Chrome 里不显示内容
因为 attr() 参数写法和浏览器支持规则被严重误解：
-
attr(data-tip)❌ 错：CSS 不认data-前缀，它只找名为tip的属性（HTML 里并不存在） -
attr("data-tip")❌ 错：引号会让浏览器当字面量字符串处理，输出就是data-tip四个字符 -
attr(tip)✅ 对：对应 HTML 中的data-tip="保存成功"，属性名去掉了data-前缀，且不加引号 - Chrome/Firefox 当前（2026 年）仍只支持
attr(title)、attr(alt)这类 HTML 标准全局属性；对data-属性，仅 Safari 16.4+ 支持attr(tip string)语法，且必须显式声明类型
真正能跨浏览器稳定工作的写法
绕过 attr() 限制，用 CSS 自定义属性中转 —— 兼容性好、可控性强：
- HTML 中写：
<button data-tip="确认删除">删除</button> - JS 或服务端把
data-tip值同步到 style 属性：<button data-tip="确认删除" style="--tip: '确认删除'">删除</button> - CSS 中用：
button::after { content: var(--tip); } - 如果不想用 JS，也可用属性选择器批量映射：
[data-tip] { --tip: attr(tip); }，但注意这句本身依赖attr(tip)，在 Chrome/Firefox 里仍无效，所以实际项目中推荐 JS 注入或构建时预处理
attr() 只能在 ::before/::after 的 content 里用
这是硬性限制，其他地方写了也白写：
-
div { color: attr(data-color); }→ 浏览器直接忽略整条声明，无报错 -
div::before { width: attr(data-width px); }→ 同样无效，attr()不能用于布局或样式计算 -
div::before { content: attr(tip); }→ 唯一合法位置，且必须带content声明，否则伪元素不渲染 - 值永远是字符串，
data-price="99.9"→attr(price)输出"99.9"，不能直接参与 calc() 运算
空值、中文、特殊字符怎么处理
attr() 原样输出，不转义也不过滤：
-
data-desc="超轻·2024款"→attr(desc)就输出超轻·2024款，无需 URL 编码 -
data-tag=""→ 输出空字符串，不会 fallback 到默认文案（CSS 目前无attr(tip, "提示")这种语法） - 含换行符（
\n）会真实渲染为换行，可能撑开气泡高度，建议后端或 JS 预处理为单行 - 数值单位如
data-weight="2.5kg"无法分离数字和单位，attr(weight)就是完整字符串"2.5kg"
最易被忽略的一点：attr() 不是“读取 data 属性”，而是“读取 HTML 元素上同名属性”——它根本不知道 data- 是自定义前缀，只认你写的那个属性名。写错名、漏属性、跨浏览器混用类型声明，都会让内容消失得无声无息。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
