CSS Скрыть текст, но показать изображение?

Мне нужно что-то изменить, не касаясь HTML-кодов.

Итак, у меня есть этот код в моем HTML

<span class="share"> 
    <ul>
        <li>Share &nbsp;&nbsp;</li>
        <li class="twitter"><a href="#">twitter</a></li>
        <li class="facebook"><a href="#">facebook</a></li>
        <li class="delicious"><a href="#">delicious</a></li>
        <li class="friendfeed"><a href="#">friendfeed</a></li>
        <li class="addthis"><a href="#">share</a></li>
        <div class="clear"></div>
    </ul>
</span>

и этот в CSS

.twitter {
    background: url('../images/tt.png') no-repeat; 
    width:      10px; 
    height:     14px;
}

Это работает нормально, но текст Twitter отображается под логотипом Twitter, я не хочу, чтобы эти тексты отображались в моем списке, я хочу заменить их изображениями в CSS.

Можно ли обойтись без использования HTML-кодов?