ie8及更早版本完全不支持::before/::after，仅ie9+支持双冒号；必须同时书写:before和::before且前者在前，ie7则需彻底弃用伪元素改用html替代。
IE8及更早版本完全不识别 ::before 和 ::after，写了等于没写；IE9–11虽能解析双冒号，但会静默忽略规则——你查DOM、看样式面板都找不到问题，最后发现是语法被跳过了。
为什么单冒号 :before 在 IE8 能用，而双冒号不行
CSS2.1 规范只定义了单冒号伪元素（:before、:after），CSS3 才引入双冒号（::before）以区分伪类和伪元素。IE8 没实现 CSS3 的这部分语法，不是 bug，是标准断层。它遇到 ::before 就直接丢弃整条规则，连错误提示都不给。
常见错误现象：
- 在 Sass 中写
&::before，编译后仍是::before，IE8 里图标/装饰线全消失 - 用 PostCSS + autoprefixer，结果发现它根本不处理冒号数量——只加
-webkit-这类前缀 - 开发时用 Chrome 测试正常，切到 IE8 兼容模式，内容凭空不见，反复检查
content值、display、position都无果
必须同时写 :before 和 ::before，且顺序不能错
IE9–11 支持双冒号，但兼容性策略要求你“降级优先”：把单冒号写在前面，双冒号写在后面，用逗号分隔。浏览器按顺序匹配，IE8 读到第一个就停，IE9+ 则继续往后找并应用后者（如果前者无效）。
实操建议：
- 写法必须是：
.icon:before, .icon::before { content: "✓"; }——:before在前，::before在后 - 不要用 SCSS 的嵌套自动展开，检查编译输出是否真生成了两个声明；某些旧版插件（如 sass-loader v10 以下）默认只出双冒号
- 构建流程中可加 ESLint 规则
plugin:css-modules/recommended或自定义正则，扫描/::(before|after)/并报警
IE7 及以下连 :before 都不支持，得彻底换方案
IE7 对伪元素零支持，无论单双冒号，整个规则都会被无视。这不是配置或 DOCTYPE 能救的——它压根没实现该特性。
可用退路：
- 用条件注释加载独立 CSS：
<!--[if lte IE 7]><link rel="stylesheet" href="ie7-fallback.css"><![endif]--> - 在
ie7-fallback.css中改用真实 HTML 元素（如<span class="icon-before"></span>）并定位覆盖 - JS 注入（慎用）：
element.insertAdjacentHTML('beforebegin', '<span class="pseudo-before"></span>');，仅限关键交互节点，避免批量操作影响首屏 - 放弃装饰性内容：IE7 用户看到无图标、无分隔线的纯文本界面，比错位、重叠、白屏更可控
content: url() 在 IE8 中根本不可用，别试了
IE8 不支持 content 属性里的 url()，哪怕你写成 :before { content: url(icon.png); }，它也会当没看见。这不是路径问题，是语法层面拒绝。
替代做法：
- 改用
background-image：:before { content: ""; display: inline-block; width: 16px; height: 16px; background: url(/i/check.png) no-repeat; } - 确保
display显式设为block或inline-block，否则 IE8 下伪元素不占空间 - 避免
position: fixed与伪元素组合，IE8 中易触发 hasLayout 异常，导致定位漂移或消失
真正麻烦的从来不是“怎么写”，而是“什么时候该停”——当项目明确要求支持 IE8，::before 就不该出现在源码里；当需求已退到 IE7，伪元素就得从设计稿里抹掉，而不是靠 hack 硬撑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
