content属性仅适用于::before和::after伪元素，用于生成不占dom位置、不参与语义的装饰性虚拟节点；普通元素上声明会被静默丢弃，attr()和url()也必须配合伪元素使用。
content 属性不是“限制”，而是设计定位决定的
它根本就不是为普通元素准备的——CSS 规范里 content 的语义是“生成内容”（generated content），即在文档流中插入一个**不占用 DOM 位置、不参与语义结构、仅用于装饰或辅助呈现的虚拟节点**。这个虚拟节点只能由 ::before 和 ::after 创建，浏览器渲染管线在解析 CSS 时，会直接跳过所有非伪元素选择器下的 content 声明，连样式计算都不进。
写成 .box { content: "x" } 为什么完全没反应？
这不是兼容性问题，也不是浏览器 bug，而是声明被标记为 invalid 后静默丢弃：
- DevTools 的 Computed 面板里根本看不到这条
content，它压根没进入样式系统 - 不会报错，也不会警告，连 console 都安静如鸡
- 即使你在 JS 里用
el.style.content = "x"设置，也无效——DOM API 不暴露该属性给普通元素 - 误写成
div::before:hover这类选择器，语法错误导致整条规则不匹配，content更无从谈起
想动态显示 HTML 属性值，attr() 必须配合伪元素
attr(data-label) 看似灵活，但它只在伪元素上下文中才真正“执行取值”：
-
.btn::after { content: attr(data-tip); }→ 正确，能读取data-tip="保存" -
.btn { content: attr(data-tip); }→ 完全忽略，哪怕属性存在也没用 - 属性名大小写必须严格一致：
data-Label≠data-label - 属性值为空字符串时，
attr()仍返回空内容；属性根本不存在时，结果是none，伪元素不渲染
用 url() 插图失败时，伪元素直接“消失”
这是最容易被忽略的稳定性陷阱：
-
::before { content: url(../img/x.svg); }加载失败（404、CORS、MIME 错误），整个伪元素区域彻底空白，连占位都没有 - 而
background-image失败只留空背景，元素本身还在，布局更稳 - 路径基于 CSS 文件位置解析，不是 HTML 页面位置——
style.css在/css/，图片在/img/，就得写../img/x.svg - 不能用
file://协议，现代浏览器直接拒载
真正难的不是写对语法，而是理解：伪元素内容天生不可选、不可索引、不进 DOM 树——它只是视觉层的一次“快照”。想让它承载关键信息，本质就是用错了工具。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
