The Usability Post
Thoughts on design and user experience by Dmitry Fadeyev

Styling Footnotes Using :last-child

Here’s a simple technique I use to compose and style footnotes without relying on additional markup. I use a static site generator to power this website. Besides being highly scalable and easy to deploy, it allows me to write posts in Markdown. The problem with Markdown is that it doesn’t come with footnotes by default. I wanted to avoid relying on a custom Markdown compiler, so I devised a simple CSS solution.

Footnotes are typically just a numbered list at the end of the post, so this is exactly what I use – an ordered list. To differentiate the list I want to consider as footnotes from any other list that may come at the end of a post I use a horizontal rule. Using a combination of the adjacent selector and the last-child pseudo-class, we can style just the last list that follows a horizontal rule. Unfortunately Markdown doesn’t support superscript either, so I use <sup> tags to style the footnote references in the actual text.

So the markdown for the list looks something like this:

Some content.<sup>1</sup>

---

1. A footnote

The above Markdown is compiled into the following HTML (let’s assume this is generated inside <article> tags – but that will be up to your template):

<article>
	<p>Some content.<sup>1</sup></p>
	<hr>
	<ol>
		<li>A footnote</li>
	</ol>
</article>

To style the last list directly following a horizontal rule we use the following selector:

article hr + ol:last-child {
	[footnote styles go here...]
}

You can then style just that last list as you see fit. Typically this means reducing the font size, but of course you can do anything you like.

I find the above method simplifies writing since I don’t have to worry about additional markup. When I need to add some footnotes I just write a list at the end of the post. I do have to also add <sup> tags to the references in the text, so this is something I’m still looking to improve. One additional benefit of this approach is that if you disable CSS, the footnotes will actually still resemble footnotes – i.e. it will be a list following a horizontal rule.

“For even falsehood, uttered by the tongue of man, seemed like truth and light before this hopelessly-deaf and unresponsive silence.”

My new book: a translation of selected short stories by Leonid Andreyev, the father of Russian Expressionism from the Silver Age of Russian literature. A piercing, pitiless glance into the heart of the human condition.

☛ Read online

Further Reading

Proust wrote that the true voyage of discovery is not to visit strange lands, but to possess other eyes, to behold a hundred universes that each of them beholds. Thus, in the words of Ruskin, what good books give us is not mere knowledge, but sight.

Sign up to my email newsletter to receive regular recommendations of exceptional books on a wide range of topics including design, art, history and philosophy. A summary of my latest posts will also be included. Sign up below: