CSS Hide Text But Show Image?

I need to change something without touching HTML codes.

So I have this code in my 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>

and this in CSS

.twitter {
    background: url('../images/tt.png') no-repeat; 
    width:      10px; 
开发者_JAVA技巧    height:     14px;
}

This works fine, but twitter text is visible under the twitter logo, I don't want those texts to appear in my list, I want to replace them with images in CSS.

Is it possible to do without touching HTML Codes?

Make the text transparent. Since it's a link, you'll want to use a few selectors to make sure all cases are addressed:

.twitter a, .twitter a:link, .twitter a:visited
{
    color: transparent;
}

Edit: This other option, while more verbose, has the benefit of keeping the focus border (the little dots that appear when a link is selected) to the size and shape of the twitter icon. Also, the text will not be revealed if selected and copied and pasted. It becomes invisible and unselectable. Here is the technique:

.twitter a {
    display: inline-block;
    overflow: hidden;
    width: 0;
    height: 14px;
    padding-left: 10px;
}

You could use text-indent:

text-indent: -9999px; /* get rid of any text */

Try making your font-size : 0px; in your css.

use text-indent with a little magic in it :)

HTML:

           <span class="share"> 
                <ul>
                    <li>Share &nbsp;&nbsp;</li>
                    <li class="twitter"><a href="#" class="twitter">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:

a.twitter {
    background-image:url('../images/tt.png');
    display:block;
    height:58px;
    text-indent:-9999px;
    width:200px;
}

So you see the text is indented but still the image is still clickable because i've put a class in the twitter link ;)