伪元素不参与bem命名体系，因其非真实dom节点、无结构语义，硬套.block__element::before违背bem“类名须对应真实节点”的核心原则，易导致假性结构、复用困难与维护耦合。
不需要，伪元素本身不参与BEM命名体系。它不是真实 DOM 节点，没有结构语义，硬套 .block__element::before 反而破坏 BEM 的设计初衷。
为什么伪元素不能写成 .block__element::before
BEM 的块（block）、元素（block__element）都要求对应真实 HTML 节点。而 ::before 和 ::after 是 CSS 渲染层的虚拟节点，不占 DOM 树位置，也不被 JS 选中或无障碍读取。强行按 BEM 命名，会制造“假性结构”：
- 写
.button__icon::before，但 HTML 里根本没有button__icon元素——类名凭空出现，违背“类名必须有对应节点”的基本约束 - 后续想复用同一套箭头样式到
.tab上，就得再写一遍.tab__icon::before，无法提取共用规则 - 改
.button--primary名字时，还得同步搜改所有.button__icon::before，耦合毫无必要
伪元素该挂在哪一级选择器下
优先绑定到已存在的、语义合理的 BEM 类上，而不是新建一个只为塞伪元素的类：
- 装饰整个块：用
.card::after（如卡片底部阴影） - 强化某个真实存在的元素：用
.input__clear::after（前提是input__clear真实存在于 HTML 中且语义成立） - 需要差异化控制：直接在修饰符上叠加，如
.button--primary::after和.button--secondary::after，无需中间层
错误示例：.button__arrow::before —— 如果 HTML 没有 button__arrow 这个元素，这个类就是纯为伪元素服务的“幽灵类”，应删掉。
content 值要不要进 BEM 命名
完全不用。它是纯样式行为，和结构无关：
- 即使你用
content: "→"实现分隔符，也不该定义.list__separator - 图标字体或 SVG data URL 的内容，由
content或background-image控制，不改变块/元素的语义职责 - 颜色控制应通过修饰符作用于宿主类，再透传给伪元素，例如
.icon--error::before { color: var(--color-error); }
最容易被忽略的是：伪元素不是“子组件”，它没有独立生命周期、不可聚焦、不参与 tab 键导航。把它当真实元素来命名，会在 SSR、无障碍测试、CSS 提取时埋下隐性坑——尤其是当你依赖 content 做关键信息展示时。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
