<html>
<head>
<style>
.fn {
    float: footnote;
}

.rfn {
    color: inherit;
    text-decoration: none;
    content: target-counter(attr(href), footnote);
    vertical-align: super;
    line-height: none;
    font-size: 83%
}
</style>
</head>
<body>
<p>
This paragraph refers to the first footnote.<a class="rfn" href="#fn1">yay</a>
</p>
<p>
This paragraph refers to the second footnote.<a class="rfn" href="#fn2">yay</a>
</p>
<p>
This paragraph has a footnote.<span class="fn" id="fn1">First footnote.</span>
</p>
<p>
This paragraph also has a footnote.<span class="fn" id="fn2">Second footnote.</span>
</p>
<p>
This paragraph refers to the first footnote.<a class="rfn" href="#fn1">yay</a>
</p>
<p>
This paragraph refers to the second footnote.<a class="rfn" href="#fn2">yay</a>
</p>
<p>
This paragraph refers to the third footnote.<a class="rfn" href="#fn3">yay</a>
(it's on the next page)
</p>
<p style="page-break-before: always">
This paragraph has a footnote.<span class="fn" id="fn3">First footnote.</span>
</p>
</body>
</html>
