title: "Floating" annotations with HTML/CSS/JavaScript/whatever
body: <p>I have a text document with some annotations, and I would like to make them appear near the text they accompany, on a webpage.</p>
  
  <p>That is, I want to convert something like this:</p>
  
  <pre><code>   The Houdan hen was never drawn into the
     cult of Sredni Vashtar. Conradin had
     long ago settled that she was an
     Anabaptist. He did not pretend to have        [23]
     the remotest knowledge as to what an
     Anabaptist was, but he privately hoped
     that it was dashing and not very
     respectable.
  </code></pre>
  
  <p>appropriately, so that in a browser, the [23] is displayed somewhere on the same line as the words "pretend to have" (preferably in the left or right 'margin' on the page), whatever the font size or wherever the line breaks might be. Is this possible, with any mix of CSS/JavaScript/pre-processing, whatever?</p>
  
  <p>See <a href="http://www.gutenberg.org/files/21769/21769-h/21769-h.htm#2H_4_0036" rel="nofollow noreferrer">(the left margin on) this page</a> for an example of what I want to do: have page numbers accompany the text. Except that the text isn't just verse that is all in <code>&lt;pre&gt;</code>, so I can't exactly copy what they do. (I guess it is possible to move all the annotations to the top/bottom of paragraphs and have them appear there, but I'd really not prefer that.)</p>
  
  <p>I realise the question might be vague, but I'm open to suggestions.</p>
  
  <p>[<strong>Note</strong>: I don't need anything to "float" in the technical (CSS/whatever) sense; I just imagined that having these "annotations" beside text mid-paragraph requires something of a floating nature. I'm open to suggestions for a better question title too :)]</p>
  
  <p><strong>Update</strong>: Also, does your method work if the "annotations" are longer than just a number, e.g. small paragraphs themselves or images?</p>