List marker split from text after natural page break

[rob101]

I have a styled ol item:

<ol>
    <li>Communication requirements</li>
</ol>

CSS as follows:

ol {
    list-style-type: none;
    counter-reset: item;
    margin: 0;
    padding: 0;
}

ol > li {
    counter-increment: item;
    font-weight: 700;
    display: table;
    margin-bottom: 10px;
    padding-top: 16px;
}


ol > li:before {
    content: counters(item, ".", decimal) ". ";
    display: table-cell;
    padding-right: 16px;
}

However when there is a natural page break, the list marker is left behind:

[liZe]

Hi!

It’s possible to have page breaks in tables, that’s why you can have the content of the first cell (the marker for you) on the first page and the content of the second cell (the text) on the second page, if for some reason it doesn’t fit. I can’t reproduce your bug with the code above, but I suppose that there’s something in the complete stylesheet that makes the text a bit taller than the marker, or a padding only set on the text.

If you want to avoid this, you can set break-inside: avoid on the li, it will avoid page breaks and thus ensure that the marker and the text stay together.

To avoid this problem, and if your goal is to apply some style to the marker, you can also use the ::marker selector. As explained on MDN the feature is "experimental" and can sometimes be limited or give strange results, but it’s often much cleaner to use it than to try to change the whole layout of the list items.