We're using ::before pseudo elements for outputting counters for list items.

ol > li:before {
  position: absolute;
  left: -3em;
  counter-increment: item;
  content: counter(item) " "; }

How can we stop a page break between the pseudo element and the list item?

(b)
===== Page break ====
text of list item

I've tried using

.li::before{ page-break-inside: avoid}

and

.li::before{ page-break-after: avoid}

but they don't make any difference.

Any ideas on what we could do?

If the list items are short, you could apply page-break-inside: avoid to the whole li element.

But why not use the ::marker pseudo-element instead?

We've tried the page-break-inside: avoid for li elements and that works fine but we have a lot of nested ol's in our content and this tends to break too early. We'll try it for li's in nested ol's and see what happens.

90% of our CSS is shared for the browser and PDF generation - ::marker is not supported in browsers.

Edited 1 Dec 2015 by niels