Multi-page header with different content on some pages

Question

I currently have a working multipage report with repeating header / footer. I have implemented page count on footer successfully (eg: Page 1 of 20). I need to change the header content on pages after the first page (adding "(Continued)" to title):

---

My Long list of Stuff

Item 1

Item 2

Page 1 of 20

---

---

My Long list of Stuff (continued)

Item 3

Item 4

Page 2 of 20

---

I can't seem to find any way to target only the pages after first. I have experimented with :nth-of-type. Using javascript after page loads to try and access counter.

let hiddenCounter = window.getComputedStyle(hiddenCounterEl, '::after').content;

I suspect getComputedStyle() not supported by PDF Reactor. Any thoughts on how to achieve this appreciated.

EDIT: The repeating section described above is a part of a larger report so something like below wouldn't work because I wouldn't know the page to start from:

.showonsubqequent { display:none; }
@page :not(:first) {
   .showonsubqequent { display:inline; }
}

Answer 1

You can use continuation markers to fulfill use-cases like this. We've introduced them with PDFreactor 11.

With the ::-ro-after-break pseudo-element, you can add generated content to elements after page breaks.

The respective style declarations could look like this:

        ul::before {
            content: "My Long list of Stuff";
        }
    
        ul::-ro-after-break {
            content: "My Long list of Stuff (continued)";
        }

Please refer to our manual for more information on continuation markers. https://www.pdfreactor.com/product/doc_html/index.html#ContinuationMarkers

While window.getComputedStyle() is supported by PDFreactor, the issue you were observing is a known issue (#8626) and has been fixed in PDFreactor 11.4.4. Prior to that version, only pseudo-element parameters without colons were supported.

Also, please note that nesting element selectors inside of page selectors is not supported by design. This is because applying styles to an element based on the page it is positioned on could change said position in the document.