不能直接用::after生成分页符，因为其伪元素默认为inline级且不参与文档流分页锚点计算，page-break-after仅对块级流内真实元素生效。
为什么不能直接用 ::after 生成分页符
很多人想用 ::after { content: ""; page-break-after: always; } 给元素“自动加一页”，这行不通。因为 ::after 伪元素默认是 inline 级，而 page-break-after（以及 break-after）只对**块级流内元素**生效。伪元素即使设了 display: block，其生成内容仍不参与文档流的分页锚点计算——Chrome、Edge 的 PDF 导出引擎会直接跳过它。
page-break-after 必须作用于真实块级元素
要让分页生效，必须把断页指令写在实际存在的、渲染为块级的 HTML 元素上。常见有效载体包括：
-
<div class="print-break"></div>（推荐：语义清晰、无内容、易控制） -
<p class="page-break"></p>（需设height: 0; margin: 0; padding: 0;避免占位） -
<section class="page-break"></section>（适合结构化内容边界）
关键不是“有没有内容”，而是“是否在流内 + 是否块级”。别给 <span> 或 <em> 加分页属性，哪怕你写了 display: block，也容易因父容器样式（如 overflow: hidden）被拦截。
用 @media print 配合真实元素实现可靠分页
下面这段代码能稳定在每张报表卡片后强制分页：
立即学习“前端免费学习笔记（深入）”；
@media print {
.report-card {
break-inside: avoid;
}
.report-card + .print-break {
break-after: page !important;
}
}
对应 HTML 结构必须是：
<div class="report-card">...</div> <div class="print-break"></div> <div class="report-card">...</div> <div class="print-break"></div>
注意三点：
- 不要省略
.report-card + .print-break中的+，否则所有.print-break都会生效，导致末尾多出空白页 -
!important是为了压过某些 UI 框架的默认样式（比如 Ant Design 的margin-bottom冲突） -
.print-break本身不要设height或visibility: hidden，否则部分打印引擎会忽略该元素
浮动或 Flex 容器里加 ::after 分页更危险
如果父容器是 float: left 或 display: flex，再往里面塞 ::after 做分页，等于双重失效：伪元素脱离流 + 父容器本身已破坏分页上下文。此时唯一出路是重构布局——删掉 float，改用 display: flow-root；或者把 Flex 容器在 @media print 中降级为 display: block，再对子项单独加 break-after: page。
真正起作用的从来不是“怎么加”，而是“加在谁身上”——那个元素得老老实实待在文档流里，不躲、不浮、不绝对定位，浏览器才认它是个分页锚点。
