Apply footnote styles

Last update: January 11, 2024

CREATED FOR:

  • Experienced
  • Admin

Footnotes are notes placed at the bottom of a page that comment on or cite a reference for a designated part of the text.

Every footnote has a footnote marker at the bottom of the page, which is generally a number or a symbol like an asterisk. Inside the main content, the same footnote marker appears as a footnote call and is indicated by the same number or symbol as a superscript.

Change the styles of footnote calls and markers

You can change the styles of the footnote calls and markers and manage their appearance in the PDF output. These styles help you quickly identify the footnotes in the document.

Example 1:

Use the given example, to add a bracket before and after the footnote call and marker:

  • Add the prefix “(” and the suffix “)” using the content attribute in the footnote-call style, which will add the brackets around the footnote number in the topic content.
  • Add the prefix “(” and the suffix “)” using the content attribute in the footnote-marker style, which will add the brackets around the footnote number at the bottom of the page.
...
.fn::footnote-call {
content: "(" counter(footnote, decimal) ")";
}

.fn::footnote-marker {
content: "(" counter(footnote, decimal) ")";
}

...

Footer in PDF output

Add brackets around the footnote call and the footnote marker.

Example 2:

You can also flag the footnote call and marker with an asterisk or lower Greek character instead of a number.

.fn::footnote-call {
 content: counter(footnote, asterisks);
}
.fn::footnote-marker {
 content: counter(footnote, asterisks) " ";
}

In the output, you can view something like:

Footer in PDF output

Add asterisk to a footnote call and marker.

Hide a footnote call

You can also apply a style to footnote calls with specific attributes. For example, use the following style to hide a footnote with the IDs:
The footnote call is hidden in the main content, but the footnote marker appears at the bottom of the page.

.fn[id]::footnote-call {
        display: none;
                        }

Format the footnote area

The footnote area is where all footnotes are placed, generally at the bottom of a page. You can format the footnote area using the page layouts or CSS styles.

Page layouts

You can use the page properties for page layouts to style the footnote area in the different sections in a PDF document. For example, you can specify the margins and padding properties of the footnote area in a chapter. You can also change the border side, style, color, width, and radius.

Learn about how to work with the page properties of a page layout.

CSS styles

You can apply styles and format the footnote area in a PDF document. For example, you can change the border length, style, color, and width.

   @page {
     @footnote {
        border-top-style: solid;
        border-top-color: #FF0000;
        border-top-width: 3px;
                }
         }

Restart the numbering of footnotes

By default, the footnotes are numbered continuously in a document. However, you can use page layouts or CSS styles to restart the numbering of footnotes.

Page layouts

You can specify a number in the page layouts to restart the footnote numbering in the different sections in a PDF document. For example, select a number from the Restart numbering from field in the Page Properties panel to restart the footnote numbering for each chapter.