Text-indent does not work with anchor tag

Question

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

I use:

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

CSS

a{text-indent:-9999px;}

... but it does not work. When I do this with another tag, for example <p>, it works.

I am also trying to add overflow:hiddento css, but it still does not work. I think I have a conceptual error with this css property.

Answer 1

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

I also suggest using

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

text-indent: -9999px; -9999px 9999px . "" : http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

Answer 2

, a , {text-indent: -9999px; display: inline-block;}

Answer 3

This can only be done with block elements.

Using:

p,a{
    text-indent: -9999px;
    display:block
}

Or you can wrap the tag ain a block element and style that instead.

Answer 4

p{
color: red;
font-family: tahoma;
font-size: 12px;
line-height: 18px;
}

p+p{
font-family: tahoma;
text-indent: 20px;
color: red; 
font-size: 12px;
line-height: 18px;
}