'Morality, as far as I could see, originates in atheism and the realization that no higher power is coming along to feed the hungry or lift the fallen. Mercy is left entirely to us.' -Barbara Ehrenreich, Living with a Wild God

How to Add Footnotes to Your Website

by Ethan Glover, Fri, Jun 05, 2015 - (Edited) Thu, Oct 20, 2016

I've always struggled with finding the perfect way to display footnotes on a webpage that actually look like footnotes. There are a lot of manual trick you can do. In the past, I've used simple id linking within documents and did some simple formatting tricks with symbols and lists. (Similar to the way I do Tables of Content.)

That's why I was happy to discover SitePoints tutorial on footnotes that make them easy to maintain and code. This method (summarized below), as well as RefMe as a tool to create properly formatted citations, will surely make my life much easier.

The CSS works as follows.

article { counter-reset: footnotes; } /* This will initialize an automatic counter so you don't have to keep track of numbers will listing your citations. */

a[aria-describedby="footnote-label"] {
	counter-increment: footnotes; /* Increment the counter by 1 every time you use the footnote-label description. */
	text-decoration: none; /* This and all other elements here are used to remove the default link style from footnotes. */
	color: inherit;
	cursor: default;
	outline: none;
}

a[aria-describedby="footnote-label"]::after { /* ::after makes all formatting here appear after the link to a footnote. */
	content: '[' counter(footnotes) ']'; /* Will make footnotes look like [1],[2],[3] */
	vertical-align: super; /* Puts [#] in superscript. */
	font-size: 0.5em;
	margin-left: 2px;
	color: blue; /* Make sure formatting is back to normal link style. */
	text-decoration: underline;
	cursor: pointer;
}

a[aria-describedby="footnote-label"]:focus::after { /* Reset focus formatting to default. */
	outline: thin dotted;
	outline-offset: 2px;
}

.footnotes :target { /* Highlights the footnote tha the user clicks on. */
	background: yellow;
}

[aria-label="Back to Content"] { /* Used to link back to document from footnotes. */
	font-size: 0.8em;
}

Putting this together in a document might work something like this.

/* Article */
<p>This sentence has a <a aria-describedby="footnote-label" href="#ref1" id="ref1-ref">reference</a>.</p>
<p>This has a <a aria-describedby="footnote-label" href="#ref2" id="ref2-ref">second</a> and a <a aria-describedby="footnote-label" href="#ref3" id="ref3-ref">third</a>.</p>

/* Footnotes */
<ol>
	<li id="ref1">Reference 1 <a href="#ref1-ref" aria-label="Back to Content">↩</a></li>
	<li id="ref2">Reference 2 <a href="#ref2-ref" aria-label="Back to Content">↩</a></li>
	<li id="ref3">Reference 3 <a href="#ref3-ref" aria-label="Back to Content">↩</a></li>
</ol>

  1. Glover, E. (2015, June 15). An Epic Tale of King Baby. Retrieved 5 July 2015.
  2. Giraudel, H. (2015, June 17). Accessible Footnotes with CSS. Retrieved 5 July 2015.
  3. Free Referencing Generator (n.d.). Retrieved 5 July 2015.