Cognitame

'I do not accept any absolute formulas for living. No preconceived code can see ahead to everything that can happen in a man's life. As we live, we grow and our beliefs change. They must change. So I think we should live with this constant discovery. We should be open to this adventure in heightened awareness of living. We should stake our whole existence on our willingness to explore and experience.' -Martin Buber

How to Add Footnotes to Your Website

by Ethan Glover, Fri, Jun 05, 2015 - (Edited) Sat, Nov 25, 2017

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.