mkdocs-material/src/assets/stylesheets/extensions/_footnotes.scss

/*
 * Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to
 * deal in the Software without restriction, including without limitation the
 * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
 * sell copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
 * IN THE SOFTWARE.
 */

/* ----------------------------------------------------------------------------
 * Footnotes extension
 * ------------------------------------------------------------------------- */

/*
 * Scoped in typesetted content for greater specificity
 */
.md-content--typeset {

  /*
   * Footnote
   */
  .footnote {
    @extend small;

    /*
     * Remove additional spacing on footnotes
     */
    > ol {
      margin-left: 0;

      /*
       * Single footnote
       */
      > li {

        // TODO: this doesn't work entirely
        // &:before {
        //   display: block;
        //   content: " ";
        //   padding-top: (5.6rem + 2.4rem + 0.4rem);
        //   margin-top: -(5.6rem + 2.4rem + 0.4rem);
        // }

        /*
         * Make permalink visible on hover
         */
        &:hover  .footnote-backref,
        &:target .footnote-backref {
          opacity: 1;
          transform: translate3d(0, 0, 0);
        }

        /*
         * Active or targeted permalink
         */
        &:hover  .footnote-backref:hover,
        &:target .footnote-backref {
          color: $md-color-accent;
        }
      }
    }

    /*
     * Correct anchor offset;
     */
    &-ref:before {
      position: absolute;
      content: " ";
      pointer-events: none;
      padding-top: (5.6rem + 2.4rem + 0.4rem);
      margin-top: -(5.6rem + 2.4rem + 0.4rem);
    }

    /*
     * Make backref transparent for custom icon
     */
    &-backref {
      @extend .md-icon;

      position: absolute;
      font-size: 2.0rem;
      vertical-align: middle;
      opacity: 0;
      color: $md-color-black--lighter;
      transform: translate3d(0.5rem, 0, 0);
      transition: opacity  .125s .125s,
                  transform .25s .125s,
                  color     .25s;

      /*
       * Hack: remove Unicode arrow for icon
       */
      &:first-letter {
        font-size: 0;
      }

      /*
       * Icon
       */
      &:after {
        content: "keyboard_return";
      }
    }
  }
}