Forum How do I...?

How can I stop a pseudo element ::before being orphaned?

niels
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?
mikeday
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?
niels
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 by niels