content是伪元素的开关，未声明、值为none或计算为none时伪元素不生成盒模型；content: ""才创建真实盒，需配合display等属性生效。
不写 content，::before 和 ::after 就根本不会进入渲染流程——不是“看不见”，是压根没生成盒模型。
content 是伪元素的开关，不是可选装饰
浏览器规范强制要求：没有 content 值（包括未声明、值为 none 或计算后为 none）的伪元素，会被直接忽略。哪怕你写了 background-color: red、width: 20px、height: 20px，也完全无效。
-
content: ""是合法且最常用的“空内容”写法，它会创建一个真实存在的盒，可用于布局、定位、绘制边框或背景 -
content: none效果等同于没写该伪元素规则，连盒都不建 - 完全不写
content属性，等价于content: none，不是“默认为空字符串”
常见错误现象：明明写了样式，却什么都没出现
典型误写：
div::before {
background: #007bff;
width: 16px;
height: 16px;
border-radius: 50%;
}
结果：页面上完全空白。原因就是缺了 content: ""。
修正后才生效：
div::before {
content: "";
display: inline-block;
background: #007bff;
width: 16px;
height: 16px;
border-radius: 50%;
}
- 记得加
display: inline-block或block，否则width/height在inline下不生效 - 用
border: 1px solid red快速验证是否真渲染：有边框就说明盒子存在，只是样式没起作用 - 检查父元素是否设置了
overflow: hidden，可能把伪元素裁掉
content 取值差异直接影响使用场景
content 不只是“要不要显示”，它决定了伪元素的语义和行为边界：
-
content: "✓"：插入 Unicode 字符，适合状态标记 -
content: attr(data-label)：从 HTML 属性动态取值，适合可配置装饰 -
content: url(./icon.svg)：内联图标资源，注意路径和加载失败表现 -
content: counter(step)：配合counter-reset/counter-increment实现自动编号
所有这些都以 content 显式存在为前提；漏掉它，后续一切样式、定位、动画都无从谈起。
容易被覆盖或重置的隐蔽坑
某些 CSS 重置库（如 Normalize.css）或组件框架会全局设置：
*::before, *::after { content: "" }
这看似安全，实则会污染你后续想删掉 content 的意图——比如你写 .btn::after { content: none; }，结果被上面那条通配规则覆盖，依然显示空内容。
更隐蔽的是：
-
all: unset会清空content，且不可继承恢复 -
content: inherit在无父级content值时，计算结果为none - 务必在开发者工具中查看伪元素的“Computed”面板，确认
content最终值不是none
真正难调试的，往往不是没写 content，而是它被某处规则悄悄重置成了 none。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
