Negative Text-Indent CSS Alternative to Hide Text

For Search Engines, we used to use negative text-indent at few places. Using text-indent, we want to hide text for normal viewers (by sending text off screen) and display image but for search engines and assistive technologies, we add text to the element. Most common place to do this was at Website Logo.

text-indent-9999px-alternative

Old ways to hide text

Major Drawback:

It has a major drawback that browser need to draw box -1000px wide. Text-indent used to be -9999px, so browser need to draw this big size box.

Alternative to Negative Text-Indent:


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

Remember: I saw that padding displays that many characters that can fit into that space. So, margin need to be used at those places.