[CSS] For image replacement, hide text with text-indent: 100%; white-space: nowrap; overflow: hidden;

Tadashi Shigeoka ·  Mon, June 8, 2015

I’ll introduce a tip for image replacement with CSS.

.hide-text { 
    text-indent: 100%; 
    white-space: nowrap; 
    overflow: hidden; 
}

It seems that using text-indent:-9999px; was mainstream in the past, but now the above writing style is apparently mainstream.

One thing to be careful about is receiving penalties from Google for hidden text.

If the image content and text don’t differ, it seems you won’t receive Google’s penalty for hidden text. So as long as you’re not doing bad things like replacing images with unrelated text, there should be no problem.

Reference Information

That’s all from the Gemba.