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).

footnote.html

<!-- 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>

style.css

/* 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;
}