Since I use Eleventy, which has the markdown-it plugin built in to render Markdown as HTML, to build my website, I use the markdown-it-footnote plugin to generate footnotes, with additional configurations to make the output more accessible and screen reader friendly.
My website pages that use footnotes include the trivia page of my A Summer’s End — Hong Kong 1986 shrine and the facts page of my Cassette Beasts shrine. Feel free to look at the HTML and CSS for reference.
Kitty Giraudel wrote an article about accessible footnotes, which teaches the method of using the combination of HTML aria-describedby attribute and CSS counters to add numbered references, to reduce the hassle of manually re-numbering all existing footnotes in case you want to update or reorder the references. She also created an accessible footnote plugin for Eleventy, which I had tried out once, with this method.
Unfortunately, a known limitation of the CSS counter method is not being able to reference the same footnote multiple times, so I use markdown-it-footnote with additional configurations.