csswg-drafts/css-template/ex-footnote.html at ace57ab1c4b4435b5b1a7f196b559b8eb275ff58 · xfq/csswg-drafts · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!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>