IE8及更早版本完全不支持::before/::after，必须用:before/:after单冒号写法；IE9–11需并列书写且:before在前；IE7及以下须彻底替换为HTML或JS方案。
IE8及更早版本完全不解析::before和::after，写了等于没写；IE9–11虽能识别双冒号，但会静默忽略整条规则——这不是样式没生效，是CSS根本没进渲染流水线。
必须用:before和:after单冒号写法
IE8只认:before和:after，遇到::before会直接跳过整条CSS规则，连解析都不做。这不是bug，是CSS2.1规范与CSS3语法断层导致的硬性限制。
- 所有需兼容IE8的项目，CSS中一律禁用
::before、::after写法 - PostCSS + autoprefixer完全不管冒号数量，它只加
-webkit-前缀，不会帮你降级 - Sass/Less默认输出双冒号，需手动配置
outputStyle: 'compressed'，或加插件（如postcss-pseudo-classes）强制转单冒号 - 检查构建产物：打开编译后的CSS文件，搜索
::before，确认已全部替换为:before
:before和::before要并列写且顺序不能错
IE9–11支持双冒号，但兼容策略要求“降级优先”：浏览器按声明顺序匹配，遇到第一个能识别的就应用，后面的跳过。所以必须把单冒号放前面，双冒号放后面，用逗号分隔。
- 正确：
.icon:before, .icon::before { content: "✓"; } - 错误：
.icon::before, .icon:before——IE8读到第一个::before就停，整条规则失效 - SCSS嵌套时容易漏掉单冒号声明，务必检查编译结果是否真生成了两个选择器
- 别在同一个规则里混用
:after和::after，IE8遇到非法语法直接丢弃整条
IE7及以下连:before都不支持，得彻底换方案
IE7对伪元素零支持，无论单双冒号，整个规则都会被无视。这不是DOCTYPE或meta能救的——它压根没实现该特性。
立即学习“前端免费学习笔记（深入）”；
- 静默失效：控制台无报错，DOM里没内容，样式面板里找不到对应规则
- 后备方案：用
[class*="icon-"]属性选择器配合真实HTML标签，或JS检测getComputedStyle(el, ':before')返回null时动态插入DOM节点 - 清浮动场景别依赖
:after，改用overflow: hidden或display: inline-block等老式方案 - IE8中
content只支持纯文本和attr()，content: url()、字体图标Unicode（如\e900）、\A换行符全无效
content在IE8里能用什么？
IE8的:before对content值极其敏感：空字符串content: ""可以，content: none或省略则整个伪元素不渲染；图片、字体图标、换行符一律不支持。
- 想显示图标？改用
background-image + display: inline-block模拟：a:before { display: inline-block; width: 16px; height: 16px; content: ""; background: url(/i/check.png) no-repeat; } - 清浮动必须写
content: ""，且不能是content: " "（带空格），某些IE8 patch版本对空白字符处理不稳定 - 父容器若设了
overflow: hidden但没触发hasLayout，伪元素仍可能不渲染，需补*zoom: 1
最容易被忽略的是：即使语法全对，IE8里伪元素的font-size也不会继承父元素，它会重置为浏览器默认16px；如果用字体图标，还必须显式设置font-weight，否则字形可能错位或不显示。
