Text

Footnotes

Published on

Example

Open in new tab
View HTML markup 
  
<!--[-->
<!--[-->
<!---->
<article>
  <p>
<!---->Maintaining <a aria-describedby="footnote-label" href="#footnote-uid" id="footnote-uid-ref">
<!---->footnotes
<!---->
<!----></a>
<!----> manually can be a pain. By using <a aria-describedby="footnote-label" href="#footnote-css" id="footnote-css-ref">
<!---->CSS
<!---->
<!----></a>
<!----> counters to add the numbered references in the text and an ordered list to display the actual footnotes
    in the footer, it becomes extremely easy.
<!----></p>
<!---->
  <footer>
    <h2 id="footnote-label">
<!---->Footnotes
<!----></h2>
<!---->
    <ol>
<!--[-->
      <li id="footnote-uid">
<!---->about uid <a href="#footnote-uid-ref" aria-label="Back to content">
<!---->↵
<!----></a>
<!---->
<!----></li>
      <li id="footnote-css">
<!---->about css <a href="#footnote-css-ref" aria-label="Back to content">
<!---->↵
<!----></a>
<!---->
<!----></li>
<!--]-->
<!---->
    </ol>
<!---->
<!---->
  </footer>
<!---->
<!---->
</article>
<!---->
<!--]-->
<!--]-->

Variables

None for footnotes