::before不设置content就不会渲染，因content是唯一开关；必须设非none值（如""、" "、attr()或url()），且常需配合display:block/inline-block及父元素position:relative才能正常显示。
不设置 content，::before 就根本不会进入渲染流程——不是“看不见”，是浏览器压根不创建这个盒子。
content 是伪元素的唯一开关
浏览器规范强制要求：::before 和 ::after 必须有非 none 的 content 值，才会生成对应的渲染节点。漏写、写成 content: none、content: normal 或 content: unset，结果一样：整条规则被跳过，DevTools 的 Computed 面板里都找不到它。
-
content: ""✅ 合法空内容，触发盒模型创建，后续所有样式（display、background、width）才可能生效 -
content: " "✅ 一个空格也行，但要注意 inline 场景下可能被折叠 -
content: attr(data-label)✅ 动态取值，但前提是 HTML 元素上真实存在data-label属性（大小写、连字符必须完全一致） -
content: url(./icon.svg)✅ 路径基于 CSS 文件位置解析，404 或 CORS 失败会导致区域彻底空白，无 fallback
写了 content 却还是没显示？大概率卡在 display 上
::before 默认是 display: inline，此时 width、height、top、left 全部无效——这是规范行为，不是 bug。
- 想设宽高或背景色 → 必须加
display: block或display: inline-block - 想绝对定位 → 加
position: absolute同时确保父元素有position: relative（否则按视口定位，极易跑出屏幕） - 仅靠边框画三角形 →
display: inline-block更稳妥，避免换行或对齐异常 - 用
border: 1px solid red临时调试，是最快速验证是否真渲染的方法
attr() 和 url() 只在伪元素上下文中有效
attr() 看似灵活，但它只在 ::before 或 ::after 中才真正执行取值。写成 .box { content: attr(data-tip); } 完全无效，浏览器静默忽略。
- 属性名大小写严格匹配：
data-label≠data-Label≠dataLabel - 属性值为空字符串（
data-label=""）→ 返回空内容，伪元素仍会渲染 - 属性根本不存在 → 返回
none，伪元素不生成 -
url()路径基于 CSS 文件所在目录解析，不是 HTML 页面路径 ——style.css在/css/，图标在/img/，就得写../img/icon.svg
img 等替换元素上 ::before 失效是设计限制，不是 bug
img 是可替换元素（replaced element），其渲染由外部资源主导。正常加载时，img::before 永远不会显示。
- ✅ 图片加载失败时，
img::before才会生效（可用于 fallback 提示） - ✅ 需要叠加图标或遮罩？把
img包进容器（如<div class="img-wrap"></div>），对容器使用伪元素 - ❌ 不要给
img直接加position: relative再挂伪元素——成功与否取决于加载状态，不可控
最容易被忽略的是：伪元素内容属于纯渲染层，不进 DOM 树，不被屏幕阅读器识别，也不支持 JS 获取。它只干一件事——在视觉层插入装饰性内容。一旦 content 缺失或非法，整个机制就停摆，后面所有样式调整都白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
