Highlighting Footnotes

I love footnotes.

I wrote about creating accessible footnotes with CSS on SitePoint. And how to do it in Eleventy. I’ve also created an Eleventy plugin to make it easy. I’ve written how to do it in React as well. And open-sourced a React component. What I’m trying to say is that if you like footnotes as much as I do, there are no excuses for not making them accessible.

But I digress, because that is not the point of today’s article. The point of today’s article is to share a teeny tiny improvement I’ve made to the footnotes on this blog, something simple that makes me happy. I’m here to share the joy.

I noticed that when following a link to a footnote at the bottom of the page, there is no visual indication about which footnote is being referenced. It’s not a problem when there is only one or even two footnotes, but when there are a lot of them, it can be confusing to figure out which one is relevant.

Simplest approach

We can use the good ol’ :target pseudo-class to highlight the referenced footnote:

.Footnotes li:target {
	background-color: rgb(255 255 0 / 0.25);
}

Example footnotes

This is just dummy content to illustrate what a footnote would look like. Let’s make it a little longer so it looks more like the typical footnote I would author.
Let’s add a second footnote so that we can better see the purpose and benefits of highlighting the linked footnote.

Polishing the design

The simple approach does the job, but it’s not the prettiest. There are a few things I don’t love about the highlight:

It doesn’t encompass the number; only the text itself is highlighted.
It sticks very close to the edges of the text (which looks worse in dark mode).

To fix that, I decided to use a pseudo-element which I can extend in the outer directions as much as I need. The code now looks like this:

/**
 * 1. Provide relative context for the pseudo-element.
 * 2. Ensure the text appears *above* the highlight.
 */
.Footnotes li {
	position: relative; /* 1 */
	z-index: 0; /* 2 */
}
/**



Expand the highlight in the list gutter to encompass the number.




Ensure the text appears above the highlight.
/
.Footnotes li::after {
inset: 0;
left: -1.5em; / 1 /
position: absolute;
background-color: rgb(255 255 0 / 0.25);
border-radius: 1em;
corner-shape: squircle;
z-index: -1; / 2 */
}



/**



Actually display the highlight when the footnote is targeted.
/
.Footnotes li:target::after {
content: ''; / 1 */
}

Example footnotes

This is just dummy content to illustrate what a footnote would look like. Let’s make it a little longer so it looks more like the typical footnote I would author.
Let’s add a second footnote so that we can better see the purpose and benefits of highlighting the linked footnote.

Note how this approach also allows us to apply rounded corners (squircles even!) to the highlight. It’s more noticeable in dark mode.

Another thing I don’t love is that the targeted footnote ends up sticking to the top edge of the window, which I think can hinder readability. To solve this, we can use the scroll-margin-top property.

.Footnotes li {
	scroll-margin-top: 1em;
}

Fading out the highlight

I was thinking: the highlight doesn’t need to persist. It’s needed when following a reference in the first place, to visually know which one to read. But when scrolling up and down the page later on, we don’t need whatever last footnote we followed to remain highlighted.

We can use a CSS animation to fade-out the highlight:

/**
 * 1. Make sure the animation’s final state persists.
 */
.Footnotes li:target::after {
	animation: fade-out 1s 5s ease-in-out;
	animation-fill-mode: forwards; /* 1 */
}
@keyframes fade-out {
to {
opacity: 0;
}
}

There is no real right or wrong approach here: I’ve decided to keep it up for 5 seconds, and then fade-out within 1 second, which I thought were good enough values. You can restart the animation to see it again:

Example footnotes

This is just dummy content to illustrate what a footnote would look like. Let’s make it a little longer so it looks more like the typical footnote I would author.
Let’s add a second footnote so that we can better see the purpose and benefits of highlighting the linked footnote.

Wrapping up

It’s not ground-breaking, but it’s the sort of small design work I enjoy. It makes things a bit nicer, one littl tweak at a time.

If you haven’t set up a proper way to have accessible footnotes on your websites, here is some materials for you to get started:

I was even thinking of creating a web component for that. I’ve never created web components before, so maybe it would be a good occasion to learn something new!