伪元素不写 content 就不会渲染，因盒模型根本未生成；content: "" 是合法空内容，可配合 display、position 等控制布局；attr() 和 url() 仅在伪元素中生效，且路径、大小写、属性存在性均需严格匹配。
伪元素不写 content 就根本不会渲染
不是“看不见”，而是整个盒模型压根不生成。哪怕你给 ::before 设置了 background-color: red、width: 20px、height: 20px，只要没写 content，浏览器就当这条规则不存在——DevTools 的 Computed 面板里连这条样式都不会出现。
常见误操作包括：
- 以为
content: ""是可选的，结果只写了display: block和background，伪元素完全空白 - 把
content写在普通选择器下，比如.box { content: "x" }，浏览器静默丢弃，毫无提示 - 用 JS 动态设置
el.style.content = "x"，无效——DOM API 不暴露该属性给非伪元素
content: "" 是最常用且合法的“空内容”写法
它不是占位符，而是明确告诉浏览器：“请创建一个真实存在的伪元素盒”。这个盒默认是 display: inline，但你可以自由控制它的布局行为：
-
content: ""+display: block→ 可设宽高、边框、背景，用于装饰块或 clearfix -
content: ""+position: absolute→ 脱离文档流，常用于图标定位或遮罩层 -
content: "\00a0"（Unicode 空格）比" "更可靠，避免部分浏览器忽略首尾空格
注意：content: none 效果等同于没写 content，伪元素依然不会生成。
立即学习“前端免费学习笔记（深入）”；
attr() 和 url() 必须配合伪元素才能生效
attr(data-label) 看似灵活，但它只在伪元素上下文中才真正执行取值。写成 .btn { content: attr(data-tip); } 完全无效，即使 data-tip 属性存在也没用。
- 属性名大小写必须严格一致：
data-label≠data-Label - 属性值为空字符串时，
attr()返回空内容；属性根本不存在时，返回none，伪元素不渲染 -
url(./icon.svg)加载失败（404、CORS、MIME 错误），整个伪元素区域彻底空白，不像background-image至少保留元素占位 - 路径基于 CSS 文件位置解析，不是 HTML 页面位置——
style.css在/css/，图片在/img/，就得写../img/icon.svg
伪元素盒模型和宿主元素完全解耦
content 本身不参与盒模型计算，真正影响布局的是 ::before 或 ::after 这个伪元素自身。它是一个独立的匿名盒，有自己的 display、width、height、margin、padding，甚至不继承宿主元素的 font-size 或 box-sizing。
- 想让箭头符号
::after { content: " →"; }不撑宽父容器？加position: absolute或visibility: hidden - 伪元素默认行内，文字流中会参与换行判断；设为
display: block后，它就变成独立块级盒，尺寸由你定义 - 别指望靠改宿主元素的
font-size来缩放伪元素里的文字——得单独写::before { font-size: 12px; }
真正难的不是语法对不对，而是意识到：伪元素内容天生不可选、不进 DOM、不承载语义——它只是视觉层的一次快照，不该用来放关键信息。
