Why does the CSS first-letter selector only work with block elements?

I want to be able to do the following:

span.footnote { display:inline; }







span.footnote:before {



   content: "<footnote/>";



   margin-right:5px;



   margin-left:5px;



   font-family:monospace;



   color:brown;



}







span.footnote:hover:before {



   content: "<footnote>";



}







span.footnote > span.content {



   display:none;



}







span.footnote:hover > span.content {



   display: inline;



   font-family:monospace;



}







span.content:first-letter { 



 color:#fff; 



}







span.footnote > span.content:after {



   content: "</footnote>";



   margin-right:5px;



   margin-left:5px;



   font-family:monospace;



   color:brown;



}







<div>hello



 <span class = "footnote">



  <span class = "content">



  * This is the network of our disconnect.



  </span>



 </span>



world.</div>

Which should render like this in a CSS-enabled browser :

And like this in a text-browser:

But it doesn't. Specifically, the leading asterix (which is included to denote a text as a footnote or afternote in user-agents that don't do formatting) is supposed to hidden by assigning it the same colour as the background.

span.content:first-letter {



 color:#fff;



}

If you're wondering why I didn't just define the :first-letter's display property as hidden it's not for lack of trying. Based on my experiments it simply doesn't work. Another mystery.

But it only works when the span.content element is displayed as a block. I want to display it inline for foofy design considerations, which since we're talking about CSS is as a good a reason as any.

Actually, I'd also like a last-letter or nth-letter selector so that I could wrap my footnotes in parentheses for text-browsers and then hide them when the CSS kung-fu enters the building.