失效主因是语法不识别、content缺失或父容器没定位上下文；IE8只认:before，写::before整条规则被静默丢弃，必须手动降级，且content: ""和position: relative缺一不可。
直接结论：失效主因是语法不识别、content缺失或父容器没定位上下文，不是“浏览器太老”，而是规则被静默丢弃——IE8 里写 ::before 就等于没写，:before 才是唯一有效写法。
IE8 及更早版本只认 :before，别信 autoprefixer
IE8 完全不解析双冒号语法，遇到 ::before 整条 CSS 规则跳过，连 content 和 display 都不会生效。PostCSS 的 autoprefixer 不处理冒号数量，它只加 -webkit- 前缀，救不了这个。
- 必须手动把所有
::before改成:before，::after同理 - Sass/Less 编译后默认输出双冒号，检查构建产物；旧版
sass-loader需配outputStyle: 'compressed'或用插件强制降级 - IE7 连
:before都不支持，此时伪元素功能必须退化：用[class*="icon-"]属性选择器 + 真实 DOM 节点，或 JS 检测getComputedStyle(el, ':before')返回null时动态插入
content 没写或值为 none，伪元素压根不进渲染树
这是跨浏览器最常被忽略的硬性门槛：没有合法 content，伪元素就不存在，不是“看不见”，是浏览器根本不创建盒模型。
-
content: ""是安全底线，哪怕只占位也得写；content: none或完全不写，等同于删除整条规则 - 用
content: attr(data-label)时，HTML 元素上必须真实存在该属性（data-label=""可以，但缺这个属性就不行） - Unicode 字符如 → 必须转义：
content: "\2192"，直接写content: "→"在旧安卓 WebView 或 IE8 中可能静默失败
定位失效？先看父容器有没有 position: relative
position: absolute 的伪元素不相对于父元素定位，而是找最近的「已定位祖先」。找不到就按 <html> 定位，极易飘出可视区。
立即学习“前端免费学习笔记（深入）”；
- 给伪元素的直接父元素加
position: relative是最简解法，哪怕它原本不需要定位 - 避免对
<span>或<a>这类display: inline元素直接设position: relative后再挂伪元素——IE8/旧安卓兼容性极差 - 父容器是
flex或grid时，position: relative仍有效，但注意align-items或justify-content可能干扰伪元素基准线
旧安卓 WebView（如 Android 4.2.2）对语法极其敏感
老安卓不是“部分支持”，而是“错一个字符就整条规则失效”，且不报错、不提示，DevTools 里都看不到伪元素节点。
- 必须用半角英文引号：
content: ""，不能用中文引号或全角空格 - 父元素 display 类型要显式声明：
display: inline-block或display: block，仅靠display: inline极易被跳过 - 慎用
attr()里的连字符，如data-icon-name在某些 WebView 中解析失败，改用data-iconname - 禁用
text-rendering: optimizeLegibility，它在旧安卓中会干扰伪元素文本渲染
真正麻烦的从来不是“怎么写”，而是“哪条规则被静默丢弃了”——IE8 不报错、旧安卓不提示、开发者工具里伪元素节点直接消失。验证时别只看样式面板，用 outline: 1px solid red 直接套在伪元素上，看盒子是否真生成；再查 computed 样式里的 content 值，确认它最终不是 normal 或空。
