Footnotes in pure CSS

Being a web developer is as much a blessing as it is a curse. One moment you’re reading an article about the most untradable players in the NBA by your favorite basketball author, the next you’re creeping around the footnote implementation of their site and wondering if Javascript is really necessary there.1

Of course it isn’t. There are games written completely in CSS. And they are also the solution to our problem. Both examples rely on differently styled or hidden, but still accessible input controls.

One way to achieve the latter is to surround the input with a label, then hide the input. Clicking the content will trigger a click on the invisible checkbox as well:

<label>
  <input type="checkbox" style="display:none;" />
  The actual content
</label>

Inside the label there will also be the footnote content, like this:

<label class="footnoteBox">
  <input type="checkbox" />
  <span class="footnoteBox-content">Born in 1963.</span>
  <span class="footnoteBox-element">Michael Jordan</span>
</label>

The key part is that the footnote content comes right after the input so that we can use the CSS adjacent sibling selector +.

/* hide checkbox in any case */
.footnoteBox > input {
  display: none;
}

/* hide content by default */
.footnoteBox > .footnoteBox-content {
  display: none;
}

/* show when checkbox is checked */
.footnoteBox > input:checked + .footnoteBox-content {
  display: block;
  position: absolute; /* don’t interrupt the text flow */
}

What’s left is the styling of the footnote box as you please. Here is a working example. The familiar superscript number can be achieved with an after element.

Pros

Cons


  1. Of course footnotes at the end of the document don’t need Javascript. But jumping back and forth is distracting so most of the time there’s also a tooltip of sorts. [return]
2015-03-19