在 Flex 布局中，::before 和 ::after 往往被当作纯装饰，但实际上它们会被当成普通的 flex 项目参与布局计算。理解这一点后，可以少写很多额外标签。

下面从机制、实战、尺寸细节与常见误区几个角度展开。

一、伪元素为什么会成为 Flex 项目

根据 CSS Flexbox 规范，flex 容器的直接子元素会生成 flex item。伪元素虽然不存在于 DOM 树中，但它们会生成一个盒子，如果父元素是 flex 容器，这些盒子会被视为该容器的在流子元素。也就是说，只要给 .flex::before 设置 content 属性，它就会被当成一个真实的子项。

如果不写 content 或 content: none，伪元素不会生成盒子，自然也不会参与 flex 布局。很多失败案例都源于此。设置 content: '' 后，一个空内容的匿名项目就诞生了。

.flex {
  display: flex;
  align-items: center;
  gap: 12px;
}
.flex::before {
  content: '';
  width: 4px;
  height: 24px;
  background: #2b6cb0;
  border-radius: 2px;
}

上述 ::before 会出现在列表最左侧，相当于第一个子项。它与真实子项一样可以设置 order、margin、flex 等属性，还可以影响整体尺寸。

二、before 和 after 结合 Flex 的常见布局实践

场景一：分隔线。导航项之间通常需要分隔符，用 ::after 给每个 <li> 添加右侧竖线，再用 :last-child 去掉最后一个。如果 <ul> 使用 display: flex，这些竖线就会作为 flex 项目排列，不需要额外 <span>。

.nav {
  display: flex;
  align-items: center;
  list-style: none;
}
.nav li {
  display: flex;
  align-items: center;
}
.nav li::after {
  content: '';
  width: 1px;
  height: 16px;
  margin: 0 14px;
  background: #cbd5e0;
}
.nav li:last-child::after {
  display: none;
}

如果直接给 <li> 设 padding，分隔线不会自动居中；把 <li> 也变成 flex 后，::after 高度固定，配合 align-items 实现垂直居中。这是伪元素与 Flex 结合非常高效的场景。

场景二：用 before 做固定占位。在卡片头部，左侧需要一个 48px 的图标位置，但数据里可能没有图标。给容器设置 display: flex; align-items: center;，再用 ::before 占位 48px 宽、48px 高，避免内容因图标缺失而左移。示例：

.card-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.card-header::before {
  content: '';
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  background: #edf2f7;
  border-radius: 8px;
}

这个占位符也能通过 background-image 放置默认图标，不影响真实 DOM，也不用为了图标多包一层 <div>。

场景三：自适应填充与装饰。利用伪元素设置 flex: 1 可以填充剩余空间，做出标题两侧延伸的装饰线。HTML 只需要一个标题，视觉上更美观。

.heading {
  display: flex;
  align-items: center;
  gap: 16px;
}
.heading::before,
.heading::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e2e8f0;
}

两个伪元素分别占据标题左右剩余空间，形成一条贯穿的线。由于伪元素也是 flex item，flex: 1 会让它们按可用空间伸缩。文本宽度由内容决定，不会换行错位。

三、尺寸、伸缩与对齐的细节

伪元素默认的 flex 属性是 flex: 0 1 auto。即使你给 width: 100px，如果空间不足它也可能被压缩。需要固定尺寸时，应设置 flex: 0 0 100px 或单独写 flex-shrink: 0。空 content 的伪元素没有内容尺寸，宽度和高度完全看 CSS 声明，所以显式设置尺寸或 flex-basis 更可靠。

伪元素也支持 align-self 和 justify-self 相关属性。在一个 align-items: stretch 的容器中，伪元素如果没有设置高度会被拉伸到容器高度，这正是做竖向分隔线或背景色块需要的效果。如果想让它保持固定高度，可以设置 align-self: center 或明确的 height，再配合 flex-shrink: 0。

同时使用 before 和 after 时，顺序需要注意：::before 默认在最前，::after 在最后。可以通过 order 调整，比如 after 的 order: -1 把它放到最前。不过这种用法容易造成维护困难，最好优先依赖 DOM 顺序和伪元素语义。

.toolbar {
  display: flex;
  align-items: center;
}
.toolbar::after {
  content: '';
  flex: 0 0 20px;
  height: 20px;
  margin-left: auto;
  background: url('icon.svg') center/contain no-repeat;
}

上面通过 margin-left: auto 把 ::after 推到最右侧，这是 Flex 的自动外边距机制，伪元素同样适用。

四、常见误区与调试建议

第一个误区是把伪元素当成不会影响布局的装饰。它们确实会影响主轴和交叉轴尺寸，尤其当 content 为不可见字符或空格时，会产生额外的宽度。因此在做纯装饰性竖线或图标时，建议使用固定 width、height，并确认 content 为空字符串且没有多余空格。

第二个误区是忘记父元素需要是 Flex 容器。某些开发者把伪元素用在 block 容器里，却期望它按 Flex 规则对齐，这是不成立的。要复用伪元素实现 flex 布局，需要把父容器设置为 display: flex 或 inline-flex。

第三个误区是开发者工具中不容易看到伪元素。Chrome 的 Elements 面板里，伪元素默认折叠在父节点下，可以展开 ::before 和 ::after 查看实际盒模型，也可以在 Styles 面板里临时禁用 content 来观察布局变化。调试时给伪元素加醒目的 background 或 outline 能更快定位。

最后要注意，伪元素无法像真实元素那样绑定独立事件，也不能添加子元素；如果某个布局模块需要复杂交互或嵌套结构，仍应使用真实 DOM 节点，而不是强行堆叠伪元素。