Puppeteer: how can I add a horizontal line in the header/footer?

Question

I am trying to add a <hr> line after the header and before the footer.

In for the footer, for example, I did the following (using puppeteer-sharp):

var footerTemplate =
    "<hr style=style='border-bottom: 2px solid #8c8b8b;' />" +
    "<div style=\"text-align: right;width: 297mm;font-size: 8px;\">" +
    "   <span style=\"margin-right: 1cm; color:rgb(89, 89, 91);\">" +
    "      Page <span class=\"pageNumber\"></span>" + 
    "   </span>" +
    "</div>";

pdfOptions.FooterTemplate  = footerTemplate;

However, I can't see the line. I found here a similar case and it is suggested to add the lines in the document instead because as it is mentioned in the following source:

The content of the header and footer is specified with the 'content' property. The content is always rendered as a single line.

Then: is there a way to use puppeteer to add these multiple lines "in the document itself"? Or better: is there a way to add a line to the footer and the header?

Answer 1

Consider avoiding the <hr /> entirely and style with CSS:

header, footer { background: #eee; }
header {
  padding-bottom: 1em;
  margin-bottom: 1em;
  border-bottom: 1px solid #000;
}
footer {
  padding-top: 1em;
  margin-top: 1em;
  border-top: 1px solid #000;
}

<header>Header</header>
<main>Content</main>
<footer>Footer</footer>