Отображать только первую букву

Допустим, эта разметка:

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

Я хочу, чтобы была видна только первая буква текста (, в данном случае просто Т )

(. На самом деле я не буду использовать его, но мне любопытно это; конечно может быть полезно позже)

Так что это была моя попытка:

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

Я смог проверить, что он этого не добьется. Вопрос почему? и есть ли работа -по этому поводу?

-РЕДАКТИРОВАТЬ-

Мы ищем решения, поддерживающие версию IE=+7/8..

Салют