content是伪元素的触发开关，必须设置合法值（如""）才能生成渲染节点，否则所有样式失效且devtools中不可见。
content 是伪元素的“开关”，不是“内容填充”
浏览器根本不会为 ::before 或 ::after 创建渲染节点，除非你显式写了合法的 content 值。这不是“看不见”，是压根不生成——后续所有样式（background-color、width、transform）全被跳过，连 DevTools 的 Computed 面板里都查不到该伪元素。
常见误操作包括：
- 只写
.icon::before { background: red; width: 10px; height: 10px; }—— 完全空白，因为没content - 写了
content: none或content: normal—— 这两个是无效值，等同于没写 - 漏掉引号：
content: ""✅，content:❌（空值不加引号 = 语法错误）
content: "" 和 content: " " 的实际差异
content: "" 是最轻量、最稳妥的触发方式：它生成一个空的渲染盒，允许你自由设置 display、尺寸、背景、边框等；而 content: " "（一个空格）在某些 inline 场景下更抗塌陷，尤其配合 display: inline-block 时能避免父容器换行或对齐异常。
但要注意：
- 空格会被 HTML 白空间处理规则折叠，若父元素设了
white-space: nowrap或font-size: 0，它可能又“消失” - 想用伪元素纯做布局占位（比如撑开行高），优先选
content: ""，再配display: block+height - 不要指望
content: ""能继承父元素文字样式——它没有文本节点，color、font-family对它无效
attr() 动态取值失败的静默陷阱
content: attr(data-label) 看似简洁，但失效时毫无提示：属性名拼错、HTML 上根本没写、值为空字符串（data-label=""），结果都是渲染出空盒，和没写 content 表现一模一样。
排查要点：
- 检查 HTML 元素是否真有该属性：
<div class="tip" data-label="提示文字"></div> - 属性名必须全小写+中划线，
data-tip-text✅，dataTipText❌ -
attr()只读 DOM attribute，不响应 JS 的el.dataset.xxx = 'val'修改 - 返回值永远是字符串，不能用于 CSS 计算：
width: calc(attr(data-width) * 1px)会直接失效
旧安卓 WebView 和部分 Safari 的兼容雷区
Android 4.x 及更早版本的 WebView 对 content 解析极其严格：全角引号（“”）、\u2714 写法、带连字符的 attr(data-icon-name)，都会导致整条伪元素规则被静默丢弃。
保底写法：
- 强制用英文半角引号：
content: ""，不是content: “” - Unicode 必须用
\XXXX格式（4 位补零）：content: "\2714"✅，content: "\u2714"❌ - 降级兼容可加单冒号回退：
.btn:before, .btn::before { content: ""; ... } - 避免
content: url(...)，老环境加载失败不报错也不请求，改用 base64 SVG 或字体图标
真正容易被忽略的是：伪元素一旦没触发 content，它就彻底不在渲染流程里——调试时别在 Styles 面板里找“为什么背景没生效”，先去 Computed 搜 content，看计算值是不是 none。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
