css - 只显示第一个字母

Question

让我们说这个标记:

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

我想要的只是让文本的第一个字母可见(在本例中，只是一个 T)

(实际上我不会最终使用它，但我对此很好奇；以后肯定会有帮助)

所以这是我的尝试:

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

我能够检查它不会实现它。问题是为什么？是否有一些解决方法？

-编辑-

我们正在寻找支持 IE=+7/8 版本的解决方案..

敬礼

Answer 1

尝试这样的事情:

.Twitter {
  font-size: 0;
}

.Twitter:first-letter {
  font-size: 12px;
}

<div class="Twitter">Twitter</div>

也许这不是最好的解决方案，但它确实有效。