Display first letter only

Lets say this markup:

<div id="socialMedia">
    <a class="Twitter">Twitter</a>
</div>

What i want is only to be visible the first letter of the text (in this case, just a T)

(Actually I won't end up using it but I am curious about this; sure can be helpfull later)

So this was my a attempt:

#socialMedia .Twitter{
    display:none;
}
#socialMedia .Twitter:first-letter {
    display: block !important;
}

I was able to check that it won't achieve it. Question is why? and is there some work-around this?

-EDIT-

We are looking for IE=+7/8 version capable solutions..

Salut