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.