Skip to content

Instantly share code, notes, and snippets.

@glueckpress
Last active March 23, 2023 19:48
Show Gist options
  • Save glueckpress/2ef8b69288c67a8bdab6 to your computer and use it in GitHub Desktop.
Save glueckpress/2ef8b69288c67a8bdab6 to your computer and use it in GitHub Desktop.
HTML footnotes. Click on anchor #a(n): skips down to anchor #f(n) inside footnote. Click on anchor #f(n) inside footnote: skips back up to anchor #a(n).
<!-- Line-breaks suiting auto-p in WordPress: -->
Paragraph with a footnote<a id="a1" href="#f1"><sup>[1]</sup></a> and more text afterwards.
Another paragraph with another footnote<a id="a2" href="#f2"><sup>[2]</sup></a> and more text afterwards.
<!-- At the end of all paragraphs: -->
<footer class="footnotes">
<a id="f1" href="#a1">[1]</a> Footnote #1 here.
<a id="f2" href="#a2">[2]</a> Footnote #2 here.
</footer>
/* Assuming something like: body { font: 100%/1.5 serif; } */
.footnotes {
border-top: 1px solid #ccc;
font-size: .75rem;
margin-top: 3rem;
padding-top: 1.5rem;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment