Edit online

There are two ways to add a horizontal line under the header.

Method 1: Add a Border in the Page Margin Boxes

To add a horizontal line that would stretch across the width of the page, add a bottom border to each of the 5 margin boxes in the top side of the page (top-left-corner, top-left, top-center, top-right, top-right-corner).

If you consider that the space between the header and the bottom border is too large, you could also change the alignment by adding a vertical-align: bottom; declaration in the page margin boxes.

For example, if you need to set some text as a header in the top-left margin box and insert a horizontal line under it, the customization CSS would look something like this:
@page chapter, chapter:first:left:right, front-page{

   padding-top: 1em;
 
  @top-left {
    content: "Custom header";
    color: gray;
    border-bottom: 1px solid black;
    vertical-align: bottom;
  }

  @top-center{
    content:" ";
    border-bottom: 1px solid black;
    vertical-align: bottom;
  }

  @top-right{
    content:" ";
    border-bottom: 1px solid black;
    vertical-align: bottom;
  }

  @top-right-corner{
    content:" ";
    border-bottom: 1px solid black;
    vertical-align: bottom;
  }

  @top-left-corner{
    content:" ";
    border-bottom: 1px solid black;
    vertical-align: bottom;
  }
Note: The padding-top: 1em; is used to avoid the border at the bottom of the header that joins with the page content.

Method 2: Use a Background Image

An alternative method is to add a horizontal line/border under an existing header (or in any other part of the page) using an SVG image, as described in How to Add a Background Image to the Header.