content: ""是伪元素渲染的强制开关，未声明则伪元素不进入渲染树；它生成空但可样式化的盒，适用于纯装饰场景，而content: none等非法值会被浏览器静默忽略。
content: "" 是伪元素的渲染开关，不是可选项
伪元素 ::before 和 ::after 不写 content 属性，浏览器就当它不存在——审查元素里根本看不到节点，所有后续样式（background、width、border）全失效。这不是“没显示”，是压根没进渲染流程。
空字符串 content: "" 是最轻量、最可控的合法值：它生成一个可参与布局的盒，但不插入任何可见字符，适合纯装饰场景。
-
content: none、content: auto、content: inherit都是非法值，浏览器静默忽略 -
content: " "（带空格）也能触发渲染，但可能引入意外空白或换行，尤其在white-space: nowrap下更难控制 -
content: attr(data-x)若属性为空或不存在，等效于content: ""，但此时伪元素仍会渲染——这点常被误认为“attr 失效”，其实是 content 值本身合法
什么时候非用 content: "" 不可？
当你只靠伪元素做视觉装饰，且不希望插入任何文本内容时，content: "" 是唯一稳妥选择。比如画分割线、遮罩层、图标背景、三角箭头。
示例：一个纯 CSS 实现的下拉箭头
立即学习“前端免费学习笔记（深入）”；
.select::after {
content: "";
display: block;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid #666;
}
- 删掉
content: ""，整个箭头消失，即使其他样式全在 - 换成
content: "\25BE"（▼）虽能显示，但字体加载失败或编码异常时会 fallback 成方块，稳定性不如空 content + border 组合 - 若父元素是
display: inline（如<span>），伪元素默认 inline 行为会导致 border 定位错乱，必须额外加display: inline-block或block
为什么 content: "" 有时撑不开父容器？
写了 content: "" 却发现父容器高度没变，不是 content 没生效，而是伪元素没参与高度计算——它默认是 display: inline，而 inline 元素对父容器高度无贡献。
- 必须显式设
display: block或display: table（后者更稳，自动触发 BFC） - 父容器不能有
height、max-height或overflow: hidden，否则会截断伪元素撑出的高度 -
clear: both对 inline 伪元素完全无效，别指望靠它清浮动来撑高 - Sass/Less 编译时若配置了「移除空 content 声明」，
content: ""可能被删掉——务必在 DevTools 的 Elements 面板里确认伪元素节点是否真实存在
容易被忽略的兼容性细节
content: "" 在 IE8+、所有现代浏览器中都可靠，但组合使用时陷阱不少：
- 伪元素在
<img>、<input>等替换元素上默认不渲染，需包裹一层容器再应用 -
attr()取值严格区分大小写和连字符：data-tooltip≠data-Tooltip - 用 Unicode 字符（如
content: "\e900"）时，反斜杠后必须是 4 位十六进制；超 4 位得写成"\{1F60A}"，且文件编码必须是 UTF-8 无 BOM - 屏幕阅读器默认忽略
content生成的内容，若伪元素承载关键语义（如“必填”标记），得补aria-hidden="true"或用真实 HTML 替代
content 是否真实存在、display 是否匹配用途、以及父容器有没有悄悄压制高度。 
