text-indent doesn't work with anchor tag

Question

http://jsfiddle.net/corinem/TtPgy/

I'm using:

<a href="">Lorem ipsum dolor.</a>

css:

a{text-indent:-9999px;}

...but this doesn't work. When I do it with another tag, for example <p>, it works.

I also try to add overflow:hidden in the css but it still doesn't work. I think that I have a concept error with this css property.

Answer 1

As the other answers suggest you can only apply text-indent: -9999px to a block element. You can use display: inline-block or display: block; and it will work.

I would also suggest using

text-indent: 100%;
white-space: nowrap;
overflow: hidden;

Instead of text-indent: -9999px; since -9999px forces the browser to create a 9999px box offscreen. Learn more about this "hack" here: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/