Littlefoot Footnotes

First Footnote 1

Second Footnote 2

Below you can see the contents of the HTML Card used in the Post Editor... (you can copy and save this for re-use in the editor as a Code Snippet)

First Footnote <a href="#fn:1" id="fnref:1">1</a>

Second Footnote <a href="#fn:2" id="fnref:2">2</a>

<div class="footnotes"><hr><ol>
    
<li class="footnote" id="fn:1"><p>
              
This is what is in the first inline footnote bubble...
              
</p></li>
    
<li class="footnote" id="fn:2"><p>
    
This is what is in the second inline footnote bubble...
    
</p></li></ol></div>

To make this work, put this in your Site Header Code Injection...

<link
  rel="stylesheet"
  href="https://unpkg.com/littlefoot/dist/littlefoot.css"
/>

...and put this in your Site Footer Code Injection...

<script
  src="https://unpkg.com/littlefoot/dist/littlefoot.js"
  type="application/javascript"
></script>
<script type="application/javascript">
  littlefoot.littlefoot() // Pass any littlefoot settings here.
</script>

And for reference, here below is a screenshot of the Site Header and Footer Code injections in your admin settings to enable Littlefoot Footnotes in your posts and pages...

There is also this...