Footnoting with CSS?

I've searched all of my CSS books, and I can't seem to find information on footnoting? There some articles on the web, I think, because when I go to them, I can't find out a thing. Can anybody here help.

Thanks

Define 'footnoting'.

What I would like to do is when I reference a source in the text of the page is to be able to "footnote" the source much as an author would do with a book. I would like the viewer to click on the footnote number and be redirected to the bottom of the page for the source. I hope that's clear.

Thanks

I like to do it like this:

<style>
.footnotelink { /* footnote link */
vertical-align: super;
font-size: 0.6em;
}
.footnotes { /* div for footnote group */
border-left: 1px solid #000000;
margin: 20px 10px 10px 1px;
padding: 1px 10px 0px 5px;
font-size: 0.8em;
line-height: 1.2em;
}
.footnotes div.footnote { /* divs for single footnotes */
margin: 0px 0px 10px 0px;
padding: 0px 0px 0px 10px;
}
</style>


<p>
George
<a href="#footnote1" name="footnotes_link1" title="footnote1" class="footnotelink">1</a>
Mary
<a href="#footnote2" name="footnotes_link2" title="footnote2" class="footnotelink">2</a>
</p>


<div class="footnotes">
<a name="footnotes" id="footnotes" title="footnotes"></a>
Note:&nbsp;
<div class="footnote">
<a href="#footnotes_link1" name="footnote1" id="footnote1" title="footnote1">
1</a>.&nbsp; George's footnote reference.
</div>
<div class="footnote">
<a href="#footnotes_link2" name="footnote2" id="footnote2" title="footnote2">
2</a>.&nbsp; Mary's reference.
</div>
</div>