旧版安卓（如android 4.2.2）中::before不显示，主因是content未声明或引号错误、父元素display类型不匹配（需inline-block/block）、伪元素未设合适display/position；须用半角引号、正确unicode转义、避免attr()连字符、禁用optimizelegibility，并在devtools中验证computed样式。
::before在旧版安卓上不显示，八成是content没写、写了但引号错了、或者父元素display类型不匹配——这三个点反复检查一遍，90%的问题当场消失。
为什么旧版安卓（如Android 4.2.2）里::before完全不渲染
老安卓 WebView（尤其是基于 Android 4.x 的系统）对伪元素的解析非常严格：它不会忽略缺失的 content，而是直接跳过整个规则；同时对父元素的 display 类型有隐式要求，inline 元素包裹 ::before 极易失效。
-
content未声明或写成content: none→ 浏览器不生成伪元素盒，DevTools 里都看不到节点 - 父元素是
<span></span>或未设display的标签 → 某些版本会拒绝渲染伪元素，哪怕content正确 - 用了双冒号
::before但未降级 → 虽然 CSS3 规范推荐双冒号，但 Android 4.2 WebView 实际只稳定支持单冒号:before
必须加的 display 和 position 组合
旧安卓对伪元素的 display 值极其敏感：默认 inline 下，width、height、top/left 全部失效，且不触发重排。
- 父元素必须显式设为
display: inline-block或display: block（仅display: inline不够） - 伪元素本身要配
display: block或display: inline-block，否则尺寸和定位无效 - 若用
position: absolute，父元素必须带position: relative—— 不能依赖body或其他远祖容器 - 避免在
flex容器内直接放absolute伪元素，老 WebView 可能错算定位基准
content 值怎么写才不被老安卓静默吞掉
旧安卓对 content 的语法容错率极低，一个引号或转义错误就导致整条规则失效，且不报错。
- 必须用英文半角引号：
content: ""✅，content: “”❌（全角引号） - Unicode 字符必须用反斜杠+4位十六进制：
content: "\e600"✅，content: "e600"或content: "\uE600"❌ - 不要用
attr()带连字符的属性名，如data-icon-name→ 改成data-iconname（IE8/Android 4.x 都不认） - 慎用
content: url()：老 WebView 加载失败时静默忽略，不触发 Network 请求，建议换 base64 内联 SVG 或字体图标
字体图标在老安卓上不显示的隐藏雷区
即使 content 和 display 都对了，字体图标仍可能空白——问题常出在字体加载链或全局样式干扰上。
- 删掉全局的
text-rendering: optimizeLegibility：它在 Android 4.2.2（如华为P6）上直接让@font-face失效 -
font-family必须显式写在伪元素上，并加!important（某些重置样式会继承父级字体） - 确保
@font-face规则在伪元素样式之前定义，且 WOFF2 文件路径可访问（老 WebView 不支持 WOFF2？那就降级用 WOFF） - 测试时临时加
color: red和font-size: 20px，排除颜色透明或字号过小导致“看不见”
真正卡住人的地方，从来不是“怎么写”，而是“写了但浏览器根本不认”——旧安卓对伪元素的约束是硬性的：content 必须存在、引号必须正确、父元素 display 必须非 inline、字体加载不能被任意样式打断。调试时别猜，直接打开 DevTools Elements 面板，右键元素 →「Force element state」→ :before，看 computed 样式里 content 是不是你写的值，再往下查 font-family 和 display 就行了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
