Skip to content

Footnotes

Markdown

1
Text text^[I'm a footnote [link](https://example.com)] text.

Template Styling

Elements are marked as footnotes with float: footnote. Footnotes use the built-in CSS counter footnote. It is incremented automatically.

  • Styling the footnote area at the bottom of the page: @page { @footnote { ... }}
  • Styling the footnote reference in text: ::footnote-call { ... }
  • Styling the footnote number in the footnote box at the bottom of the page: ::footnote-marker { ... }
  • Styling footnote text content (shown at the bottom of the page): same selector (and child elements) where you applied float: footnote (e.g. footnote element)
1
This is a text with footnotes<footnote>I'm the footnote content</footnote> in it.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/* Footnotes */
@page {
  @footnote {
    padding-top: 0.5em;
    border-top: 1px solid black;
  }
}
footnote {
  float: footnote;
}
/* Footnote number in text */
::footnote-call {
  content: counter(footnote);
}
.footnote-call-separator {
  content: ',';
}
/* Footnote number in footnote area */
::footnote-marker {
  content: counter(footnote) '.';
  display: inline-block;
  width: 2em;
  padding-right: 1em;
  text-align: right;
}
/* Styling links in footnotes */
footnote a {
  color: black;
  text-decoration: none;
}