伪元素不属于BEM命名体系，因其是虚拟节点，不参与HTML结构，应作为修饰符或状态的视觉延伸挂载到真实存在的BEM块或元素上，而非新建类名。
伪元素不属于BEM命名体系，不能写成 BEM__element::before 这类形式；它应作为修饰符或状态的视觉延伸，独立于块/元素层级之外。
为什么 BEM 不直接约束 ::before 和 ::after
BEM 的核心是语义化命名，只作用于真实存在的 DOM 节点（即 block、block__element、block--modifier）。而 ::before 和 ::after 是虚拟节点，不参与 HTML 结构，也不影响 JS 选择器逻辑。强行套用 BEM__element::before 会制造假性耦合——比如改个修饰符名，就得同步改伪元素选择器，但其实它们本就不该被当成“子元素”来管理。
常见错误现象：
- 把
.button__icon::before当作标准写法，结果发现.button__icon根本不存在于 HTML 中，纯属为塞伪元素硬造的类名 - 在多个组件里复用同一套伪元素样式时，因命名嵌套过深导致 CSS 无法提取共用规则
::before 和 ::after 应该挂在哪一级选择器下
优先绑定到已有 BEM 块或元素上，而非新建 BEM 类。例如实现按钮右侧箭头，直接写：
立即学习“前端免费学习笔记（深入）”；
.button::after {
content: "";
display: inline-block;
width: 8px;
height: 8px;
border-right: 2px solid currentColor;
border-top: 2px solid currentColor;
transform: rotate(45deg);
margin-left: 4px;
}而不是：
.button__arrow::before { /* 错误：无对应 HTML 节点 */ }使用场景判断要点：
- 如果伪元素用于装饰单个块（如卡片阴影、标题下划线），挂
.block::after - 如果用于强化某个元素的视觉特征（如输入框右侧清空按钮图标），挂
.block__input::after，前提是.block__input真实存在且语义合理 - 若需差异化控制（如
.button--primary::after和.button--secondary::after样式不同），直接在修饰符类上叠加伪元素即可，无需新增元素级中间层
content 值要不要进 BEM 命名
不要。content 是样式层行为，和结构命名无关。即使你用 content: "→" 实现分隔符，也不该因此定义 .list__separator —— 它只是 .list-item::after 的表现结果。
容易踩的坑：
- 为每个不同
content值创建独立 BEM 类（如.icon--home、.icon--search），却让它们都依赖::before，造成类名膨胀且不可维护 - 把图标字体或 SVG data URL 写死在
content里，导致无法通过 JS 切换主题色或尺寸；正确做法是用background-image或mask配合变量控制 - 在
content里拼接动态文本（如计数器），这违反了伪元素仅用于装饰的原则；应改用真实 DOM 节点 + JS 更新
兼容性与现代写法取舍
双冒号 ::before 是规范写法，但 IE8 及更早版本只认单冒号 :before。2026 年绝大多数项目已放弃 IE8 支持，可统一用双冒号。
不过要注意：Sass/Less 编译器对 :: 的解析较敏感，尤其在嵌套中。例如：
.button {
&--loading::before {
content: "";
}
}某些旧版预处理器可能报错，此时应显式写出完整选择器，或升级工具链。
真正容易被忽略的是伪元素的层叠上下文问题：默认情况下 ::before 渲染在元素内容之下，::after 在之上。如果没设 z-index 且父容器未建立新层叠上下文，它们可能被意外遮挡——这不是命名问题，但常因过度关注 BEM 而漏查。
