How to mark page break occurrences in CSS print style

Question

I need to see where exactly browser puts page breaks in print preview, so I can modify that behaviour with CSS properties. In other words, I need to style page break itself (for testing purpose of course), so I could see where the page break will occur, so that I know which selectors to modify with page-break-after/inside/before properties.

To clarify this, I am NOT looking for Chrome Dev Tools print emulation. That tool unfortunately doesn't show what will page look like in print (anyone can compare it's results with results in Print preview window accessed by CTRL P in Chrome or any other browser). However, that tool may be useful when you need to find out whether some of your print CSS rules overrides certain screen media rule or not. But it doesn't help much in situations such as this, when you need to locate exact positions of browser-rendered page breaks in order to manually modify page break behaviour.

Answer 1

I'd recommend using page-break-after in your print media styles. Add it to the selector like you see below, and the page will break properly.

@media print {
  footer {
    page-break-after: always;
  }
}