::after中attr()仅显示元素真实存在的html属性值，如data-tip或title；属性不存在或为空时返回空字符串；content必须写为attr(data-tip)，不可加外层引号；不支持拼接、嵌套及动态更新，需js配合class切换或改用真实元素。
伪元素::after里用attr()显示什么内容？
只能显示元素自身 HTML 属性的值，且该属性必须真实存在于 dom 中（不是 JS 动态设置的 style 或 dataset，也不是 css 自定义属性）。比如 data-tip="保存成功" 可以，title 也可以，但 data-tooltip 拼错就取不到。
-
attr()不解析 HTML 实体，"会原样输出，别指望它自动转义 - 如果属性不存在或为空，
attr(data-tip)渲染结果是空字符串，不会报错也不会 fallback - 不支持嵌套函数，
attr(data-tip) attr(data-id)是非法写法，CSS 不认
::after 的content必须带引号吗？
必须。即使你写的是 attr(data-tip)，也要包在双引号或单引号里：content: "attr(data-tip)" 是错的 —— 正确写法是 content: attr(data-tip)，注意：这里引号是语法的一部分，但不是字符串引号，而是 CSS 语法规则要求的字面量包裹符；实际书写时**不能加外层引号**。
- 常见错误：
content: "attr(data-tip)"→ 浏览器当普通字符串渲染，真就显示“attr(data-tip)”五个字 - 正确写法只有这一种：
content: attr(data-tip) - 想拼接文字？不行。
content: "提示：" attr(data-tip)是无效语法；得靠 JS 补全，或改用data-tip值本身包含前缀
为什么attr()在::before/::after里不更新？
CSS 伪元素不监听 DOM 属性变化，attr() 是声明时求值，不是响应式绑定。JS 改了 dataset.tip 或 el.setAttribute('data-tip', '已复制')，伪元素内容不会自动刷新。
- 触发重绘的唯一可靠方式：切换一个 class，再切回来（强制重建伪元素）
- 更稳妥的做法是避免依赖动态更新，把变化逻辑交给 JS + 真实元素，伪元素只做静态提示
- 某些浏览器（如旧版 safari）对
attr()更新的支持极差，连 class 切换都不管用
移动端或高对比度模式下提示文字看不见？
因为 ::after 默认是 inline 级别，没有宽高、背景、行高、颜色继承保障，尤其在 windows 高对比度模式下，自定义颜色和背景会被系统强制覆盖或清空。
立即学习“前端免费学习笔记（深入）”；
- 必须显式设置：
color、background、padding、border-radius，否则可能透明或紧贴文字 - 加上
display: inline-block或display: block，否则padding和background在部分浏览器里不生效 - 别依赖
z-index：伪元素默认堆叠上下文受限，要提升层级得给父元素加position: relative和z-index
伪元素提示看着轻量，但 attr() 的取值边界、更新机制、渲染兼容性，每一条都卡在真实项目上线前的 QA 环节上。最常被忽略的是：你以为改了 data 属性它就动了，其实它早就“拍死”在初始渲染那一刻了。