伪元素在Flex布局中可作为弹性项目参与布局，通过设置content激活后能实现占位、装饰分隔线及角标等视觉效果，提升结构表现力且无需额外HTML标签。
在Flex布局中，CSS伪元素 ::before 和 ::after 虽然不占据文档流中的实际位置，但它们可以作为视觉装饰或布局辅助工具，巧妙地增强结构表现力。虽然伪元素默认是行内元素，但在Flex容器中，它们会被当作普通子元素一样参与Flex布局，只要父容器设置了 display: flex，伪元素就能被纳入弹性布局系统。
伪元素在Flex容器中的行为特点
当一个元素设置了 display: flex，其所有子元素（包括伪元素）都会成为Flex项目。但注意：伪元素本身不是真实DOM节点，而是通过CSS生成的内容，因此它们的使用有一定限制：
- ::before 和 ::after 会作为Flex项目插入到容器的子元素序列中
- 可设置 flex、order、align-self 等Flex属性
- 默认内容为空，需用 content 属性激活（即使为空字符串 ""）
- 不能绑定事件或包含真实子元素
利用 ::before 实现布局占位或装饰
有时我们需要在Flex项目之间添加视觉分隔或对齐占位，而不想修改HTML结构。这时可以用 ::before 创建一个弹性占位符。
示例：实现两端对齐的导航栏，第一个项目前加一个不可见占位
.nav {
display: flex;
gap: 1rem;
}
.nav::before {
content: "";
flex: 1; / 占据剩余空间，将项目推向右侧 /
}
.nav-item {
padding: 0.5rem 1rem;
background: #007acc;
color: white;
border-radius: 4px;
}
这样，::before 作为一个弹性项目，撑开左侧空间，使导航项整体右移，实现简洁的视觉排版。
立即学习“前端免费学习笔记（深入）”；
使用 ::after 添加装饰性元素
在卡片或按钮中，常需要添加小角标、图标或装饰线条。结合Flex布局，::after 可精确定位并参与对齐。
示例：带“新”标签的按钮
.btn {
position: relative;
display: flex;
align-items: center;
gap: 0.5em;
padding: 0.6em 1em;
background: #f0f0f0;
border: 1px solid #ccc;
border-radius: 6px;
}
.btn::after {
content: "NEW";
position: absolute;
top: -6px;
right: -6px;
font-size: 0.75em;
color: white;
background: red;
padding: 2px 6px;
border-radius: 12px;
white-space: nowrap;
}
这里 ::after 不参与Flex主布局，但按钮内部文本和图标仍可通过Flex良好对齐，而角标独立定位，互不影响。
创建对称或居中装饰线
常见于标题分隔线设计，利用 ::before 和 ::after 创建等长线条，文字居中显示。
.divider {
display: flex;
align-items: center;
width: 100%;
margin: 20px 0;
}
.divider::before,
.divider::after {
content: "";
flex: 1;
height: 1px;
background: #ddd;
}
.divider span {
padding: 0 15px;
color: #666;
font-size: 0.9em;
}
渲染后，两条伪元素生成的线自动伸展，文字居中，形成“文字居中分隔线”效果，无需额外标签。
基本上就这些。伪元素在Flex布局中虽非主流布局手段，但作为轻量级视觉扩展非常实用。关键是记得设置 content，并理解它们在Flex容器中享有与其他子元素相同的排列权利。合理使用，能让样式更简洁、结构更干净。
