'Boredom, rooted in a fundamental discomfort with the self, is one of the least tolerable mental states.' -Gabor Mate, In the Realm of Hungry Ghosts

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.