Superscripted CSS markers.

The problem this solves

The default <sup> element renders a marker but does several inconvenient things along the way: it forces a smaller font size, it can break line-height in inconsistent ways across browsers, and it does not by itself produce the interactive link behavior you want for a citation marker. The CSS approach lets you keep the marker as a regular anchor link and apply the visual superscript through CSS, so screen readers and print stylesheets see a normal link.

The markup

<p>
  ... text of the paragraph that ends in a citation
  <a class="fn-marker" href="#fn1" id="ref1">1</a>.
</p>

<ol class="footnotes">
  <li id="fn1">
    Author, <em>Title</em> (Place: Publisher, Year), pp.
    <a class="fn-back" href="#ref1">↩</a>
  </li>
</ol>

The CSS

.fn-marker {
  font-size: 0.7em;
  vertical-align: super;
  text-decoration: none;
  padding: 0 0.15em;
  color: var(--burgundy);
}
.fn-marker:hover { text-decoration: underline; }

.footnotes {
  list-style: none;
  padding-left: 0;
  border-top: 1px solid #d6cfc0;
  padding-top: 1em;
  margin-top: 2em;
  font-size: 0.92em;
}
.footnotes li {
  padding: 0.4em 0 0.4em 2em;
  text-indent: -2em;
}
.fn-back {
  margin-left: 0.4em;
  text-decoration: none;
}

@media print {
  .fn-marker { color: black; }
  .fn-back { display: none; }
}

What it gives you

• Marker semantics: a real <a> link rather than a styled glyph; screen readers announce the link.
• Two-way navigation: click the marker to jump to the note; click the back arrow on the note to return.
• Print fidelity: the back-arrow disappears in print, and the marker color collapses to black so the printed document looks like a normal academic article.

What it does not solve

The marker still requires the reader to scroll. For high-density academic prose with many notes per paragraph, sidenotes or DHTML pop-ups handle the proximity problem better.