IE8及更早版本不支持::before，必须用:before；IE9–11需并列书写:before, ::before且:before在前；IE7及以下完全不支持伪元素，须用后备方案。
::before 在 IE8 及更早版本中完全无效，不是写法问题，是语法被直接丢弃；IE9–11 虽识别双冒号但会静默忽略规则——你查不到报错，也看不到渲染，最后发现是整条 CSS 没生效。
IE8 必须用 :before，::before 写了等于没写
CSS2.1 规范只定义了单冒号伪元素（:before、:after），CSS3 才引入双冒号（::before）以区分伪类和伪元素。IE8 没实现 CSS3 这部分，遇到 ::before 就整条规则跳过，连解析都不做。
- 常见错误：Sass 中写
&::before，编译后仍是::before，IE8 里图标/装饰线全消失 - PostCSS + autoprefixer 不处理冒号数量，它只加
-webkit-前缀，不会帮你降级 - 检查构建输出：某些旧版
sass-loader（v10 以下）默认只输出双冒号，需手动配outputStyle: 'compressed'或加插件强制转单冒号
IE9–IE11 需要 :before, ::before 并列写，且顺序不能反
IE9–11 支持双冒号，但兼容策略要求“降级优先”：浏览器按声明顺序匹配，遇到第一个能识别的就应用，后面的跳过。所以必须把 :before 放前面，::before 放后面，用逗号分隔。
- 正确写法：
.icon:before, .icon::before { content: "✓"; } - 错误写法：
.icon::before, .icon:before—— IE8 读到第一个::before就停，整条规则失效 - SCSS 嵌套自动生成时容易出错：检查编译结果是否真生成了两个声明，别信“自动兼容”这种说法
IE7 及以下连 :before 都不支持，得彻底换方案
IE7 对伪元素零支持，无论单双冒号，整个规则都会被无视。这不是 DOCTYPE 或 meta 标签能救的——它压根没实现该特性。
- 静默失效：控制台无报错，DOM 里没内容，样式面板里找不到对应规则
- 后备方案：用
[class*="icon-"]属性选择器配合真实 HTML 标签，或 JS 检测getComputedStyle(el, ':before')返回null时动态插入 DOM 节点 - 清浮动场景别依赖
:after，改用overflow: hidden或display: inline-block
:before 在 IE8 中 content 只能用纯文本和 attr()
IE8 的 :before 不支持 content: url()、字体图标 Unicode（如 \e900）、\A 换行符，也不支持图片或复杂计数器。
- 想显示 Font Awesome 图标？IE8 里只会空白或乱码
- 安全做法：用
background-image+display: inline-block模拟，例如a:before { display: inline-block; width: 16px; height: 16px; content: ""; background: url(/i/check.png) no-repeat; } - 若必须用
content，只传纯文本或attr(data-icon)，再由 JS 注入真实内容
真正麻烦的不是写法本身，而是 IE8 的静默丢弃机制——它不报错、不警告、不提示，你得靠经验预判哪条规则会在哪版 IE 里蒸发。一旦漏掉 :before 声明，或者顺序错了，上线后就是一块看不见的空缺，排查成本远高于预防成本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
