[JSWolf]

Originally Posted by increase

Thank you, do you have n example of the code for kindle?

Here is code that will work.

<p class="paraNoIndent">There are many kinds of vampires. Indeed, it is said that there are as many kinds of vampires as there are types of disease.<span class="footnoteRef"><a href="9780061807862_Footnote.xhtml#footnote1" id="footnote_1">[*]</a></span> And they’re not just human (if vampires are human). All along the Ramtops may be found the belief that any apparently innocent tool, be it hammer or saw, will seek blood if left unused for more than three years. In Ghat they believe in vampire watermelons, although folklore is silent about <i>what</i> they believe about vampire watermelons. Possibly they suck back.</p>

Here is the back code.

<p class="footnote" id="footnote1"><span class="footnotePara"><a href="9780061807862_Chapter_1.xhtml#footnote_1">[*]</a> Which presumably mean that some are virulent and deadly, and others just make you walk in a funny way and avoid fruit.</span></p>

Here is the CSS code.

body {
  widows: 1;
  orphans: 1;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  text-align: justify;
}
img {
  max-width: 100%;
  max-height: 100%;
}
p {
  margin-top: 0;
  margin-bottom: 0;
  text-indent: 1.2em;
}
.aboutAuthorPage {
  page-break-before: always;
}
.aboutAuthorText {
  text-align: justify;
  text-indent: 0;
  margin-top: 0;
  margin-bottom: 0.8em;
}
.chapterNumber {
  margin-top: 0.8em;
  margin-bottom: 0.8em;
  text-align: center;
  text-indent: 0;
  font-size: large;
  font-weight: bold;
}
.chapterOpenerText {
  margin-bottom: 0;
  margin-top: 0;
  margin-left: 0;
  text-indent: 0;
}
.contentsHead {
  margin-top: 0.8em;
  margin-bottom: 0.8em;
  text-align: center;
  text-indent: 0;
  font-size: large;
  font-weight: bold;
}
.copyrightPage {
  page-break-before: always;
}
.copyrightText {
  font-size: small;
  margin-top: 0.8em;
  font-weight: normal;
  margin-bottom: 0;
  text-indent: 0;
  text-align: justify;
}
.footnote {
  margin-bottom: 1.5em;
  font-style: normal;
  font-weight: bold;
  text-indent: 1.5em;
  text-align: justify;
}
.footnotePara {
  margin-bottom: 2em;
  font-style: normal;
  font-weight: normal;
  text-indent: 0;
  text-align: justify;
}
.footnoteRef {
  display: inline;
  font-style: normal;
  font-weight: bold;
  vertical-align: top;
}
.paraCenter {
  margin-bottom: 2%;
  text-indent: 0;
  text-align: center;
}
.paraNoIndent {
  padding-top: 2em;
  text-indent: 0;
  text-align: justify;
}
.paraNoIndent1 {
  padding-top: 1em;
  text-indent: 0;
  text-align: justify;
}

I've posted the entire CSS.

It's the use of the ID that says where the links land in the XHTML file.