# Header / Tittle on footnotes if they are present

**URL:** <https://talk.jekyllrb.com/t/header-tittle-on-footnotes-if-they-are-present/1997>\
**Category:** Help\
**Created:** [July 22, 2018, 9:14pm UTC](https://talk.jekyllrb.com/t/header-tittle-on-footnotes-if-they-are-present/1997 "2018-07-22T21:14:09Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![lpuerto](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/lpuerto/32/847_2.png) [@lpuerto](https://talk.jekyllrb.com/u/lpuerto)\
**Post date:** [July 22, 2018, 9:14pm UTC](https://talk.jekyllrb.com/t/header-tittle-on-footnotes-if-they-are-present/1997/1 "2018-07-22T21:14:09Z")

</div>

Hi!

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

```auto
<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](https://canada1.discourse-cdn.com/flex030/uploads/jekyllrb/original/2X/5/5ebb6c99a6f691764b96c87cc7b7a9599ce740d1.png)

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?

---

<div class="post-metadata">

**Author:** ![mmistakes](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/mmistakes/32/2169_2.png) [@mmistakes](https://talk.jekyllrb.com/u/mmistakes)\
**Post date:** [July 23, 2018, 3:15am UTC](https://talk.jekyllrb.com/t/header-tittle-on-footnotes-if-they-are-present/1997/2 "2018-07-23T03:15:28Z")

</div>

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

```css
.footnotes::before {
  display: block;
  content: "Footnotes:";
}

```

---

<div class="post-metadata">

**Author:** ![lpuerto](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/lpuerto/32/847_2.png) [@lpuerto](https://talk.jekyllrb.com/u/lpuerto)\
**Post date:** [July 23, 2018, 10:04am UTC](https://talk.jekyllrb.com/t/header-tittle-on-footnotes-if-they-are-present/1997/3 "2018-07-23T10:04:02Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![mmistakes](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/mmistakes/32/2169_2.png) [@mmistakes](https://talk.jekyllrb.com/u/mmistakes)\
**Post date:** [July 23, 2018, 1:16pm UTC](https://talk.jekyllrb.com/t/header-tittle-on-footnotes-if-they-are-present/1997/4 "2018-07-23T13:16:59Z")

</div>

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.