Header / Tittle on footnotes if they are present

Help
1

Hi!

I’m wondering if there is anyway to inter text before the footnotes and inside the class=class="footnotes"

<div class="footnotes">
  <ol>
    <li id="fn:1" class="footnote-processed">
      <p>first footnote;<a href="#fnref:1" class="reversefootnote">↩</a></p>
    </li>
    <li id="fn:2" class="footnote-processed">
      <p>second footnote<a href="#fnref:2" class="reversefootnote">↩</a></p>
    </li>
  </ol>
</div>

My idea is to put a separator and a tittle “Footnotes:” to separate the footnotes form the post, like this.

36
Screen Shot 2018-07-22 at 23.12.36.png794×137 3.1 KB

Of course, I only this to show up if the there are footnotes in the page.

Any idea of how can I easily implement this?

2

Yes with CSS. You can use the ::before pseudo class along with content to do something like:

.footnotes::before {
  display: block;
  content: "Footnotes:";
}
1 Like
3

Thanks for the reply!

I’ve implemented that way and works really nice. However, would be more desirable to do something more at layout/includes level, or perhaps in javascript?

4

Don’t think that’s possible without writing a custom plugin that can hook into the Markdown conversion that Kramdown does.

As far as doing it in JavaScript, not sure what that would gain you but you certainly can. You’d use document.querySelector(".footnotes"); to grab the footnote class and then write some JS to append whatever text/elements you want before it.

1 Like