Forum How do I...?

Page break between content and content:before

seanhinde
Hi,

I am using position: absolute to place a counter lined up before an indented paragraph (DITA step). This works nicely most of the time but on occasion I get a page break between the counter and the content.

steps {
    counter-reset: step-counter;
}

step::before {
    position: absolute;
    content: counter(step-counter);
    counter-increment: step-counter;
    font-weight: 500;
    left: 100pt;
    page-break-after: avoid;
}

step {
    display: block;
    margin-bottom: 5pt;
    margin-left: 10pt;
    page-break-after: avoid;
}


This page break feels like not quite correct behaviour from Prince, but I'm not expert enough in CSS to know. I'm also sure there's a better way to place a number before an indented paragraph that avoids this issue, but I haven't figured it out either. Suggestions welcome. Thanks
mikeday
What about using float: left and negative left margin to pull the number out of the way?
seanhinde
Thanks Mike! Float solved the problem.

I'd experimented with it before but got into a conflicted mess with another piece of content that "floats" even further to the left. The knowledge that -ve margin and float should do it sorted me out :)

I'm still curious whether a page break should be able to creep in between absolute positioned :before content and the content though.
mikeday
Ideally not, but it might be difficult to avoid in all cases.
seanhinde
Success was short lived. float solved the issue where I happened to be looking, but the issue now appears elsewhere in the document. It happens a couple of times per day of my author / render cycle.

BTW this was with 7.1. I'll upgrade to 8.1 and see how it goes, though from your comment it sounds like something deep and hard to think about without breaking a sweat!