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;
}