'Character is something you forge for yourself; temperament is something you are born with and can only slightly modify. Some people have easy temperaments and weak characters; others have difficult temperaments and strong characters.
We are all prone to confuse the two in assessing people we associate with. Those with easy temperaments and weak characters are more likable than admirable; those with difficult temperaments and strong characters are more admirable than likable. Of course, the optimum for a person is to possess both an easy temperament and a strong character, but this is a rare combination, and few of us are that lucky. The people who get things done tend to be prickly, and the people we enjoy being with tend to be accepting, and there seems to be no way to get around this. Obviously, there are many combinations of character and temperament, in varying degrees, so that this is only a rough generalization - but I think it is one worth remembering when we make personal judgments.' -Sydney J. Harris

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.