Semantic sidenotes for the web without JavaScript

April 03, 2025

Found a good example (sidenote: More information on the prerequisite note. ) of implementing sidenotes in a static webpage without using JavaScript and ended up stealing it.

It's responsive as well, so if you view the webpage on a device with a smaller screen (e.g. mobile phone), it still works. The only difference is that the sidenotes will not appear on the side. Instead, you have to tap on the word with the sidenote symbol next to it, and the context will appear underneath.

I'm using the following HTML (sidenote: I made modifications to the original HTML (and CSS), but since the original stuff is licensed under GPL-2.0, I think that means I have to share my changes. ) for my sidenotes.

<span class="sidenote">
    <input
      aria-label="Show sidenote"
      type="checkbox"
      id="sidenote__checkbox--{{ number }}"
      class="sidenote__checkbox">
    <label
      tabindex="0"
      title="Sidenote content"
      aria-describedby="sidenote-{{ number }}"
      for="sidenote__checkbox--{{ number }}"
      class="sidenote__button sidenote__button--number-{{ number }}
    ">{{ label }}</label>
    <small id="sidenote-{{ number }}" class="sidenote__content sidenote__content--number-{{ number }}">
      <span class="sidenote__content-parenthesis"> (sidenote: </span>
      {{ body }}
      <span class="sidenote__content-parenthesis">)</span>
    </small>
</span>

And I'm using this SCSS:

.sidenote {
    display: inline;

    &__button {
        &::after {
            content: "\002a"; // *
            display: inline-block;
        }

        &--number-2::after {
            content: "\2051"; // ⁑
        }

        &--number-3::after {
            content: "\2042"; // ⁂
        }

        &--number-4::after {
            content: "\2020"; // ✝
        }

        &--number-5::after {
            content: "\2021"; // ‡
        }

        &--number-6::after {
            content: "\2051\2051"; // ⁑⁑
        }

        &--number-7::after {
            content: "\2021\2021"; // ‡‡
        }
    }

    &__checkbox {
        display: none;
    }

    &__content-parenthesis {
        position: absolute;
        left: -99999px;
        top: auto;
    }
}

/* For narrow viewports, the sidenote is hidden by default and shown when the checkbox is checked. */
@media screen and (max-width: 1079px) {
    .sidenote {
        &__checkbox {
            &~.sidenote__content {
                /* Hidden, but accessible to browsers that don't do CSS (e.g. screenreaders, Pocket) */
                position: absolute;
                left: -99999px;
                top: auto;
            }

            &:checked {
                &~.sidenote__content {
                    /* override hidden-but-accessible */
                    position: relative;
                    left: auto;

                    /* Don't break up line containing the sidenote */
                    float: left;
                    min-width: 100%;

                    display: block;
                    margin: 0.8rem 0;
                    padding: 0.8rem 1.6rem;
                }

                &~.sidenote__button::after {
                    content: none;
                }
            }
        }

        &__button {
            color: var(--link-color);
            text-decoration: underline;
            text-decoration-style: dotted;
            cursor: pointer;

            &:not(:hover):focus::after {
                display: inline;
                /* display:inline-block causes misalignment between focus ring and background. */
            }
        }
    }
}

@media screen and (min-width: 1080px) {
    .sidenote {
        --sidenote-width: 12rem;
        --sidenote-margin: 12rem;
        --text-size: 1rem;
        cursor: default;

        &:hover {

            .sidenote__button::after,
            .sidenote__content::before {
                color: var(--link-color);
            }
        }

        &__content {
            display: block;
            position: absolute;
            right: 0;

            /* Align sidenote top with main text */
            margin-top: calc(-1.5*var(--text-size));

            margin-right: calc(1 * var(--sidenote-width) + 1*var(--sidenote-margin));
            width: var(--sidenote-width);
            font-size: 0.8rem;
            color: var(--text-color);

            &::before {
                /* * */
                content: "\002a";

                display: flex;
                align-items: flex-start;
                justify-content: flex-end;
                position: absolute;
                top: 0;
                bottom: 0;
                left: -4rem;

                /* to align different types of asterisks we need a fixed width */
                width: 3rem;
            }

            &--number-2::before {
                content: "\2051"; // ⁑
            }

            &--number-3::before {
                content: "\2042"; // ⁂
            }

            &--number-4::before {
                content: "\2020"; // ✝
            }

            &--number-5::before {
                content: "\2021"; // ‡
            }

            &--number-6::before {
                content: "\2051\2051"; // ⁑⁑
            }

            &--number-7::before {
                content: "\2021\2021"; // ‡‡
            }
        }
    }
}