CourtBouillon − CSS Tricks: footnotes

CSS Tricks: footnotes

What would be an old book, a research paper, a 100-page report, a very important contract without footnotes at the bottom of the pages?

Example of a footnote — A basic footnote

How do you include footnotes in your document? CSS has the perfect property for you:

.footnote {
  float: footnote;
}

You can then include the footnotes in your document using the class you’ve just configured:

<p>I'm a nice text with a footnote<span class="footnote">I'm the footnote</span>.</p>

You’ll then have the footnote displayed at the bottom of the page!

It’s also possible to add some style to the zone where footnotes are displayed. What about adding some space and a small border?

@page {
  @footnote {
    border-top: 0.1mm solid;
    margin-top: 0.5em;
    padding-top: 0.5em;
  }
}

The footnote call can also be customized. By default, it automatically uses small superscript numbers if they’re available in your font. If they’re not available, no problem: just use a small block of CSS to get what you want:

::footnote-call {
  font-size: 0.7rem;
  line-height: 1;
  vertical-align: super;
}

Learn more about footnotes: