content 属性仅对 ::before 和 ::after 伪元素有效，对普通元素或伪类（如 :hover、:active）无效；必须通过伪元素使用，且需确保 content 值合法、属性存在、优先级足够、编码正确。
content 属性只能用在 ::before 和 ::after 上
直接给普通元素（比如 div、p 或 span）写 content: "xxx" 是无效的，浏览器会完全忽略这条声明——它根本不是为这些元素设计的。CSS 规范里明确限定 content 只作用于伪元素，这是硬性限制，不是兼容性问题，也不存在“开启开关”或 polyfill。
为什么不能用 :active 或 :hover 直接配 content
:active、:hover、:focus 这些是伪类，不是伪元素，它们只是匹配状态，不生成新盒子，所以加 content 没有意义。你看到的“不生效”，其实是语法合法但语义错误：浏览器解析通过，但根本不执行内容插入逻辑。
- 想让按钮点击时显示提示文字？得用
.btn:active::after { content: "已按下"; } - 想让链接悬停时加图标？得写
a:hover::before { content: "→"; }，而不是a:hover { content: "→" } - 误写成
div::before:hover？顺序错，选择器无效，规则压根不匹配
把动态内容挂到 ::before 上的实操要点
用 attr() 从 HTML 属性取值是最常用方式，但容易踩坑：
- HTML 中必须存在对应属性，且大小写、连字符严格一致：
data-label="编辑"→ CSS 里只能写content: attr(data-label)，写成attr(datalabel)或attr(DataLabel)都取不到 -
attr()返回纯文本，不会解析 HTML 标签，content: attr(data-html)即使值是"<strong>粗体</strong>"，也只会原样显示那串字符 - 如果属性值为空字符串（
data-tip=""），attr(data-tip)仍会渲染空内容；但如果属性根本不存在，结果就是none，伪元素不生成 - 调试时可临时改成
content: "DEBUG:" attr(data-label)，一眼看出是否取到值
content 值本身出错导致伪元素“消失”
就算写了 ::before，只要 content 值非法或被覆盖，整个伪元素就等于没写：
立即学习“前端免费学习笔记（深入）”；
-
content: none、content: normal、content: inherit（父级没设 content 时）都会让伪元素不渲染 -
content: ""合法，但若后续被重置库（如某些 UI 框架的全局*::before { content: "" }）覆盖，再单独写.my-el::before { content: "x" }就可能因优先级不够而失效 - 使用 Unicode 字符时，
\2192要求 CSS 文件保存为 UTF-8 无 BOM；写 emoji 如content: "✅"更简单，但得确认部署环境支持该字符集 - 开发者工具里看 Computed 面板中的
content值，是最直接的判断依据——如果不是none，说明伪元素已生成；如果是none，就回头查声明链
content 的存在性、合法性、继承链和计算结果，这四层得一层层剥开看，缺一不可。 
