Side Notes

<article>
  <header>
    <h1>Side Notes</h1>
    <p>Automatic side notes for links (showing their titles) and footnote texts.</p>
  </header>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup> elit. Aut animi consequatur odit natus suscipit eligendi modi reiciendis quod hic minus id architecto facilis odio earum aliquid
      voluptas ipsum, explicabo aperiam! Lorem <a href="https://google.com/" title="Doloremque inventore minima">ipsum dolor sit</a> amet, consectetur adipisicing elit. Doloremque inventore minima voluptatum magnam laborum tempore possimus rerum corporis
      ipsum quasi qui quos, quae, perspiciatis fuga, labore voluptates quas at. Nisi.</p>
    <p>Aut animi consequatur odit<sup class="footnote-ref"><a href="#fn2" id="fnref2">[2]</a></sup> natus suscipit eligendi modi reiciendis<sup class="footnote-ref"><a href="#fn3" id="fnref3">[3]</a></sup> quod hic minus id architecto facilis odio earum
      aliquid voluptas ipsum, explicabo aperiam!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut animi consequatur odit natus suscipit eligendi <a href="https://pascalhertleif.de/" title="Lorem ipsum dolor">modi reiciendis quod</a> hic minus id architecto facilis odio earum aliquid
      voluptas ipsum, explicabo aperiam!</p>
    <h2>Adipisicing Elit</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut animi consequatur odit natus suscipit eligendi modi reiciendis quod hic minus id architecto facilis odio earum aliquid voluptas ipsum, explicabo aperiam! Lorem ipsum dolor sit amet, consectetur
      <a href="https://medium.com/@killercup" title="Adipisicing et.al.">adipisicing</a> elit. Eaque veritatis quasi cupiditate dicta tempore sapiente quas eos excepturi et, quo facilis amet. Nam voluptates facilis vero, repellendus architecto alias explicabo.</p>
    <p>Quia, ab excepturi laudantium, rerum earum voluptates accusantium atque vero, aliquam inventore eaque, aperiam sapiente. <a href="https://twitter.com/killercup" title="Illuminati">Illum</a>, animi, accusantium! Ratione blanditiis corrupti officia.</p>

<hr class="footnotes-sep" />
    <section class="footnotes">
      <ol class="footnotes-list">
        <li id="fn1" class="footnote-item">
          <p>Expedita est, perferendis, quidem iusto, ipsam, quia repellendus architecto ullam sapiente tenetur odio. <a href="#fnref1" class="footnote-backref">↩</a></p>
        </li>
        <li id="fn2" class="footnote-item">
          <p>Fugiat vero perferendis iure qui voluptates natus odio nulla. Nisi corrupti, laborum fuga reiciendis optio, tempore maiores culpa porro. <a href="#fnref2" class="footnote-backref">↩</a></p>
        </li>
        <li id="fn3" class="footnote-item">
          <p>Ea praesentium, harum, eos quibusdam omnis earum temporibus? <a href="#fnref3" class="footnote-backref">↩</a></p>
        </li>
      </ol>
    </section>
  </div>
</article>