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?

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.

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).

a { text-indent:-9999px; }

Tends to work well from my exprience.

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

text-indent :-9999px 

Works flawlessly.

Another option is to hide based on bootstraps "sr-only" class. If you wrap the text in a span with the class "sr-only" then the text will not be displayed, but screen readers will still have access to it. So you would have:

<li><a href="somehwere"><span class="sr-only">Link text</span></a></li>

If you are not using bootstrap, still keep the above, but also add the below css to define the "sr-only" class:

.sr-only {position: absolute;  width: 1px;  height: 1px;  padding: 0;  margin: -1px;  overflow: hidden;  clip: rect(0 0 0 0);  border: 0; }

Just need to add font-size: 0; to your element that contains text. This works well.

I have followed the best answer of Loktar and it worked very well. The only problem I had was with Chrome (my current version is 27.0.1453.94 m). The problem I had was that it seems Chrome is aware that the text in the link is not visible and it puts the link a little bit lower then it is supposed to be (something like margin-top, but it is not possible to change it). This happens with all the ways in which we make the text invisible: - line-height: 0; - font-size: 0; - text-indent:-9999px;

I was able to fix this problem by adjusting the vertical-align of the link like this:

vertical-align: 25px;

I hope this is helpful

You can put an image into ::before pseudoelement and set the same dimensions for as is the image + add overflow:hidden, like:

li a::before{
  content:url('img');
  width:20px;
  height:10px
}

a {
  overflow:hidden;
  width:20px;
  height:10px
}

Use this code:

<div class="hidden"><li><a href="somehwere">Link text</a></li></div>

I was able to fix this problem by setting font-size: 0 .

How about display: none;

That hides anything.