Elegant Footnote Styling with Pure CSS

Learn how to style footnote references and footnote lists elegantly using only CSS, enhancing readability and consistency in your content.

This is an example sentence with a footnote reference[1] inside the text.

Footnotes
  1. This is the description of the footnote referenced above.

Why this works

Footnotes styled with smaller superscript references and a clean, separated list improve document readability and lend a professional, book-like feel to online content without requiring JavaScript.

Source Code

<p>This is an example sentence with a footnote reference<span class="footnote-ref">[1]</span> inside the text.</p>

<div class="footnotes">
  <h5>Footnotes</h5>
  <ol>
    <li id="footnote1">This is the description of the footnote referenced above.</li>
  </ol>
</div>

<style>
.footnote-ref {
  font-size: 0.75em;
  vertical-align: super;
  margin-left: 2px;
  color: #0d6efd;
  cursor: pointer;
}
.footnote-ref:hover {
  text-decoration: underline;
}
.footnotes {
  margin-top: 3rem;
  border-top: 1px solid #dee2e6;
  padding-top: 1rem;
  font-size: 0.9em;
  color: #6c757d;
}
.footnotes ol {
  padding-left: 1.5rem;
}
.footnotes li {
  margin-bottom: 0.5rem;
}
</style>