Brown Markup Library

<div>
    <p>I am a footnote example
        <a id="my-footnote-1-ref" href="#footnote-1" class="footnote_link">
            <span class="visibly_hidden">Footnote
            </span>
            <sup class="footnote_sup">1</sup>
        </a>, for some gibberish locked to the container.
    </p>
    <div> the in between</div>
    <p id="footnote-1">
        <sup class="footnote_sup">
            <span class="visibly_hidden">
                footnote
            </span>
            1
        </sup>
        I am in fact a very glorious footnote. So grand I must be read by all.&nbsp;
        <a href="#my-footnote-1-ref" title="return to text" class="footnote_link">
            <span aria-hidden="true">↩</span>
        </a>
    </p>
</div>

.visibly_hidden {
    clip: rect(0px, 0px, 0px, 0px);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}
.footnote_link {
    text-decoration: none;
}
.footnote_sup {
    color: #C00404;
    margin-right: -5px;
    font-size: 1rem;
}