How do I hide anchor text without hiding the anchor?

Say I have the following markup:

<li><a href="somehwere">Link text</a></li>

If I have a background image on the a tag, how would I hide the link text using just css? font-size:0 seems to work fine on the a tag apart from in ie7 little blobs show.

Thanks for help so far I have used line-height: 0; and font-size: 0; and text-indent: -999px. But it still shows up some blobs in safari, any ideas?

Solution 1:

Try

 a{
    line-height: 0; 
    font-size: 0;
    color: transparent; 
 }

The color: transparent; covers an issue with Webkit browsers still displaying 1px of the text.

Solution 2:

Wrap the text in a span and set visibility:hidden; Visibility hidden will hide the element but it will still take up the same space on the page (conversely display: none removes it from the page as well).

Solution 3:

a { text-indent:-9999px; }

Tends to work well from my exprience.

Solution 4:

Mini tip:

I had the following scenario:

<a href="/page/">My link text
:after
</a>

I hided the text with font-size: 0, so I could use a FontAwesome icon for it. This worked on Chrome 36, Firefox 31 and IE9+.

I wouldn't recommend color: transparent because the text stil exists and is selectable. Using line-height: 0px didn't allow me to use :after. Maybe because my element was a inline-block.

Visibility: hidden: Didn't allow me to use :after.

text-indent: -9999px;: Also moved the :after element

Solution 5:

text-indent :-9999px

Works flawlessly.