bootstrap 5 的 ::before/::after 在 ie11 中“完全失效”并非选择器错误，而是因 css 变量（var()）导致整条规则被静默丢弃，连带 content、display 等属性均不生效；ie11 对 var() 是“全有或全无”处理，不支持 calc() 内嵌 var()，且 postcss-custom-properties 无法还原动态表达式。
Bootstrap 5 的 ::before 和 ::after 伪元素在 IE11 下“完全失效”，不是你写错了选择器，而是 CSS 变量（--bs-*）导致整条规则被浏览器跳过——IE11 遇到无法解析的 var() 就静默丢弃该声明，连带伪元素的 content、display 等属性一并失效。
IE11 对 var() 的处理是“全有或全无”
Bootstrap 5 中大量伪元素依赖 CSS 变量，例如 .btn::before（虽不常用）或更典型的 .clearfix::after 虽未直接用变量，但其父容器若含 color: var(--bs-body-color)，一旦该规则因 var() 失效，整个上下文样式链就可能断裂。关键点在于：
- IE11 不识别
var(--x)语法，遇到就直接忽略整条 CSS 声明，**不会回退到前一条**（哪怕你写了color: #212529; color: var(--bs-body-color);） -
::after的content: ""若写在同一条含var()的规则里（如.card::before { content: ""; background: var(--bs-card-bg); }），整个规则无效 → 伪元素根本不会渲染 - 检查方式：在 IE11 F12 工具中选中目标元素 → “计算样式”里搜
content，若为空或显示normal（而非""），基本可确认是变量导致规则被丢弃
.clearfix::after 在 IE11 里也可能“看起来有效但实际靠不住”
Bootstrap 5 的 .clearfix 类本身不含 var()，所以 ::after 能触发，但它的可靠性在 IE11 中受限于两个隐藏条件：
-
content: ""必须是非空字符串；写成content: none或漏掉会彻底失效 —— 这和变量无关，但常被误改 - IE11 对某些 SVG 容器或
display: inline父元素里的::after支持不稳定，即使 CSS 规则生效，伪元素也可能不参与 BFC 创建 - 更现实的问题：Bootstrap 5 已移除所有 IE8/9 兼容 hack（如
zoom: 1），而 IE11 的display: table渲染在缩放或高 DPI 下偶有塌陷，比现代浏览器更脆弱
别指望 postcss-custom-properties 能救伪元素
PostCSS 插件只能处理静态变量（如 --bs-primary: #007bff → color: #007bff），但 Bootstrap 5 中伪元素相关样式常含动态计算，例如：
.alert::before {
content: "⚠";
margin-right: calc(var(--bs-gap) * 0.5);
}
IE11 不支持 calc() 里嵌套 var()，而 postcss-custom-properties 无法还原这种表达式，结果是 margin-right 直接归零或被丢弃 → 伪元素位置错乱甚至不可见。这类问题不会报错，只会静默失效。
真正容易被忽略的是：即使你手动把所有 var(--bs-*) 替换为硬编码值，并确保 ::after 的 content 和 display 单独成规则，IE11 仍可能因父容器的 display: flex 渲染缺陷，导致伪元素脱离文档流后无法正确清除浮动——这不是伪元素本身的问题，而是整个布局上下文在 IE11 里已不可信。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
