text-indent doesn't work with anchor tag

Question

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

I\'m using:

Lorem ipsum dolor.

css:

a{text-indent:-         


        

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/

Answer 2

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;
}

Answer 3

tag is block but a is inline ,you must write a{text-indent:-9999px;display:inline-block;}

Answer 4

You can only do that with block items.

Use:

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

Or you can wrap your a tag in a block item and style that instead.