css-template-1/ex-footnote.html

<!doctype html public '-//W3C//DTD HTML 4.01//EN'>
<html lang=en>
<title>Example “footnote”</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.tpl_layout1.1.6-bb.js"></script>
<script type="text/javascript">$(function() {$.setTemplateLayout();});</script>

<style type="text/css">
div.section {
    grid: "*"
          "F"}
.note {
    flow: F;
    content: counter(note) ".\A0" contents;
    counter-increment: note;
    font-size: smaller}
.note::before {
    content: counter(note);
    vertical-align: super;
    font-size: larger}
</style>

<p>(This example doesn't work with the JavaScript emulator.)

<div class=section>
  <p>The balubious coster of the fifth secter<span
    class=note> The sixth secter coster is a difter
    manon.</span> of The Rollow Carpug mentizes a costernica.
  <p>&hellip;
</div>

</html>