为什么CSS伪元素::before在部分旧版IE浏览器中无法显示？-css教程-PHP中文网

ie8及更早版本不支持::before，必须用:before；ie9–11需并列书写:before, ::before且:before在前；ie7及以下完全不支持伪元素，须用后备方案。

为什么css伪元素::before在部分旧版ie浏览器中无法显示？

IE8及更早版本根本不识别`::before`语法

IE8 及更早版本只实现 CSS2.1 规范，而双冒号::before是 CSS3 引入的语法，用于区分伪类和伪元素。浏览器遇到::before会直接跳过整条 CSS 规则——不是报错，也不是渲染异常，是压根不解析。你在 DevTools 里根本看不到这条规则生效，content再对也没用。

常见错误：Sass 中写 &::before，编译后仍是::before，IE8 里图标/装饰线全空
PostCSS autoprefixer 不处理冒号数量，它只加-webkit-前缀，不会帮你降级
构建输出必须检查：旧版 sass-loader（v10 以下）默认只输出双冒号，需手动配 outputStyle: 'compressed' 或加插件强制转单冒号

IE9–IE11 需要`:before, ::before`并列且顺序不能反

IE9–11 虽支持双冒号，但兼容策略是“按顺序匹配第一个能识别的”。如果写成.icon::before, .icon:before，IE8 读到第一个::before就停，整条规则失效；必须把单冒号放前面，用逗号分隔。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

正确写法：.icon:before, .icon::before { content: "✓"; }
SCSS 嵌套自动生成时容易出错：务必检查编译结果是否真生成了两个声明，别信“自动兼容”
IE9–11 中::before虽被识别，但若单冒号声明缺失或顺序错，它不会 fallback，而是静默忽略

IE8 的`:before`内容能力极弱

即使语法对了，IE8 的:before也只支持纯文本、attr() 和极简计数器，不支持现代常用功能：

content: url() → 完全不支持，图片不会加载
字体图标 Unicode（如\e900）→ 不识别，显示为空白或乱码
\A 换行符、counter() 复杂用法 → 无效
安全做法：用background-image + display: inline-block模拟，例如a:before { display: inline-block; width: 16px; height: 16px; content: ""; background: url(/i/check.png) no-repeat; }

IE7 及以下连`:before`都不支持，必须换方案

IE7 对伪元素零支持，无论单双冒号，整个规则都会被浏览器无视。这不是 DOCTYPE 或 meta 标签能救的——它压根没实现该特性。静默失效，控制台无报错，DOM 里没节点，样式面板里找不到对应规则。

后备方案一：用属性选择器配合真实 HTML 标签，比如[class*="icon-"]::before失效时，改用<i class="icon-check"></i>
后备方案二：JS 检测getComputedStyle(el, ':before')返回null时动态插入 DOM 节点（注意防重复）
清浮动场景别依赖:after，改用overflow: hidden或display: inline-block

真正卡住人的地方，往往不是“怎么写”，而是没意识到 IE8 的:before和现代浏览器的::before根本不是同一套能力——它没有图片、没有字体图标、没有换行、没有复杂计数器，甚至连attr(data-icon-name)里的连字符都可能不认。兼容旧 IE，本质是接受限制，而不是强行复刻新特性。