如何在 CSS 中的每个页脚元素后插入分页符？

在一些文档中，我们可能需要在每个页脚元素后插入分页符，以达到类似于打印输出的效果，而不是将所有内容都集中在一页中。

在 CSS 中，我们可以使用一些技巧来实现这个效果。

使用page-break-after属性

我们可以使用 page-break-after 属性来实现这个效果。这个属性会指定在当前元素后插入一个分页符。我们可以将这个属性应用到页脚元素中，让每个页脚元素之间都插入一个分页符。

.footer {
  page-break-after: always;
}

避免在页眉和页脚中使用分页符

在实现这个效果时需要注意的是，我们需要避免在页眉和页脚中使用分页符。因为在打印时，这些元素会在每一页中都出现，而分页符会导致在这些元素中出现多余的空白页。

为了解决这个问题，我们可以使用 @media print 媒体查询来针对打印时的情况进行样式的设置。

@media print {
  /* 避免在页眉和页脚中使用分页符 */
  .header, .footer {
    page-break-after: avoid;
  }
  
  /* 在每个页脚元素后插入分页符 */
  .footer {
    page-break-after: always;
  }
}

通过这些技巧，我们可以在 CSS 中实现在每个页脚元素后插入分页符的效果，以达到更好的文档输出效果。