Fabled

Aesthetically-Pleasing Footnotes

View a demonstration of this snippet through Codepen.

Adding footnotes to a site actually isn’t all that easy, sad to say. I’m certain that if you’re using something like Wordpress or other social media-adjacent platforms, it does so automatically, but doing it on a static site hosted and coded on your own can be a bit tricky. If you’re up to the challenge (or just desperately need footnotes), I’ll try to explain here how I set them up for one of my sites.

Most of my sites don’t use footnotes. Indeed, the web, with its structure of hyperlinks, is designed to make footnotes relatively unnecessary, for the most part. They can be handy occasionally, or just good for adding extras that don’t fit with your main content. This is particularly true if your site contains a lot of text. While this site itself is fairly short and sweet, Fabled is designed around my journey creating sites of the longer sort, so of course, I thought this was worth documenting once I’d figured it out.

CSS

The CSS for this will largely depend on what aesthetic you prefer for the footnotes, of course, but must follow a certain syntax if you’re using the HTML structure below. You’ll find that the footnotes work (so to speak) perfectly well without any CSS at all, of course, as they should, but are a lot easier to integrate into an existing theme with some of this.

Here’s an example of some CSS to make the footnotes a little more aesthetically pleasing. Since the subject of this is footnotes, though, we won’t go too hard on the aesthetics. You certainly can make these look shiny and pink (I’ve done it), but the example I’m giving shows neutral shades and a plain appearance, fitting something vaguely academic like this. Please note that this example includes a body tag, which can and should be removed so as not to mess up your own styling in most cases.

    /* these next two items style links associates with the footnotes themselves and navigation within them; the numbers and arrows */
    a.fn {
        color: #a88c89;
        vertical-align: super;
        font-weight: bold;
        text-decoration: none;
        font-size: 0.9em;
    }
    
    a.fn:hover {
        color: #96a8a8;
    }
    
    /* the below class provides basic styling for container for the footnotes themselves */
    .footnotes {
        font-size: 0.9em;
        color: #8c8d90;
        margin-top: 0.5em;
        margin-bottom: 2em;
        padding-top: 0em;
        border-top: 4px solid #a88c89;
    }
    
    /* the footnotes are displayed as an ordered list with numbers beforehand denoting each individual footnote */
    .footnotes ol {
        padding: 0px;
        counter-reset: footnote-counter;
    }
    /* each individual footnote is styled below */
    .footnotes li {
        margin-bottom: 0.5em;
        list-style: none;
        counter-increment: footnote-counter;
    }
    
    /* adding (and styling) the numbers at the front of the footnotes */
    .footnotes li::before {
        content: counter(footnote-counter) ". ";
        font-weight: bold;
        color: #a88c89;
        margin-right: 0.3em;
    }
    
    /* styling links that might appear within the footnotes */
    .footnotes a {
        color: #a88c89;
        background-color: transparent;
        text-decoration: none;
    }
    
    .footnotes a:hover {
        color: #96a8a8;
    }

HTML

To add a citation that will link to a footnote, follow this syntax! An important thing, though? Each footnote must have its own unique ID and link ID. The way we do that is simply by numbering each footnote... the first footnote in a document will be #fn1 up here and #ref1, etc.

At the bottom of your document, add this little container and list, which you can then populate with your footnotes! Be sure to replace both the #fn1 and the #ref1 label for subsequent footnotes, though - #fn2, #ref2, #fn3, etc, to provide a unique pair for each footnote.