A footnote is a text note placed on the bottom of a page. It references a specific part of the main content of the document, giving further explanations or information about a citation. A footnote is marked by a defined symbol both in the main content of the page and in the footnote area at the bottom of the page, to show which parts belong together.

For content that is required to have a footnote, the style "float: footnote" can be applied. The text content of the element that the style applied to, will appear in the footnote area at the bottom of the page. Content in the footnote area can be styled via CSS using the "footnote" rule.

Example: Defining a footnote for an element and styling the footnote area.

.footnote {
    float: footnote;
}
@page {
    @footnote {
        border-top: solid black 1px;
    }
}

By defining a footnote, a footnote call is left behind in the main content. Its content and style can be influenced by the "footnote-call" pseudo-element.

For every footnote element, there is also a "footnote-marker" pseudo-element added. Usually this contains the same number or symbol as the footnote-call it belongs to.

Example: Styling the footnote-call and footnote-marker:

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

By default, the "footnote" counter is available and is automatically incremented for every element with the style "float: footnote". By default, this counter numbers the footnotes sequentially for the entire document. To number footnotes on a per-page basis, the counter has to be reset on every page, using the following style:

@page {
    counter-reset: footnote;
}