Creating a footnote number and specifying a default value

You can create and cite footnotes using CSS for Paged Media. Normally, the footnote numbering is automatically handled, but by using CSS counters, you can control the numbering format and start value for footnotes on each page. This sample demonstrates customizing footnote numbers using standard CSS.

This sample demonstrates footnotes in action. Here's the first footnote This footnote explains the usage of CSS counters for customizing footnote numbering. and here's the second one This footnote provides additional context on footnote customization..

By default, footnotes are numbered sequentially. However, we can change the numbering style and start value using CSS counters.

On this second page, we've customized the footnote numbering to demonstrate the flexibility provided by CSS. For instance, This footnote, with a customized number, shows how you can start numbering from a specific value. and this demonstrates continued custom numbering..

CSS Code

@page {
  size: A4;
  margin: 10mm 20mm;
  @bottom-center {
    content: element(footer);
  }
}

@page :first {
  @bottom-center {
    content: element(first-footer);
  }
}

body {
  font-family: serif;
  font-size: 10pt;
  line-height: 1.4;
}

h1 {
  font-family: sans-serif;
  font-size: 2em;
  font-weight: bold;
  padding: 0.3em 1em;
  margin: 1em 0;
  background-color: #EEE;
}

.intro {
  margin: 1em 0;
  border: 1pt solid #9999FF;
  padding: 0.5em;
  text-align: justify; 
}

p {
  text-align: justify;
}

.footnote {
  -ah-float: footnote;
  font-size: 0.8em;
}

.footnote::footnote-call {
  content: counter(footnote, lower-alpha);
  font-size: 0.8em;
  vertical-align: super;
}

.footnote::footnote-marker {
  content: counter(footnote, lower-alpha);
  font-size: 0.8em;
  vertical-align: super;
}

#second-page {
  page: new-page;
  counter-reset: footnote 9;
}

#second-page .footnote::footnote-call {
  content: "*" counter(footnote);
}

#second-page .footnote::footnote-marker {
  content: "*" counter(footnote);
}

#footer {
  position: running(footer);
  font-size: 0.8em;
  text-align: right;
  color: green;
}

#first-footer {
  position: running(first-footer);
  font-size: 0.8em;
  text-align: right;
  color: green;
}

Body Code

<body>
  <div id="first-footer">
    <a href="https://www.antennahouse.com/">Antenna House, Inc.</a>
  </div>

  <h1>Creating a footnote number and specifying a default value</h1>

  <div class="intro">
    You can create and cite footnotes using CSS for Paged Media. Normally, the footnote numbering is automatically handled, but by using CSS counters, you can control the numbering format and start value for footnotes on each page. This sample demonstrates customizing footnote numbers using standard CSS.
  </div>

  <p>
    This sample demonstrates footnotes in action. Here's the first footnote
    <span class="footnote">This footnote explains the usage of CSS counters for customizing footnote numbering.</span>
    and here's the second one
    <span class="footnote">This footnote provides additional context on footnote customization.</span>.
  </p>

  <p>
    By default, footnotes are numbered sequentially. However, we can change the numbering style and start value using CSS counters.
  </p>

  <div id="second-page">
    <p>
      On this second page, we've customized the footnote numbering to demonstrate the flexibility provided by CSS. For instance,
      <span class="footnote">This footnote, with a customized number, shows how you can start numbering from a specific value.</span>
      and <span class="footnote">this demonstrates continued custom numbering.</span>.
    </p>
  </div>

  <div id="footer">
    <a href="https://www.antennahouse.com/">Antenna House, Inc.</a>  
  </div>
</body>