Why does this method usually use negative text indentation?
Suppose you want to replace the anchor with an image, and you make that image the background of the anchor. You still want the anchor-wrapped text to be available for accessibility reasons, but you don't want it to be visible. A well known technique is to use something like text-indent: -9999px; along with overflow: hidden;
So let's say our anchor box is 50px x 50px, why don't we just make the text padding: 50px? This will launch the text into a hidden anchor overflow, no matter how long it takes!
source to share
Ok, let's just see what happens when you do this.
<div class="image">Hide me please</div>
div.image {
width: 50px;
height: 50px;
background: url(http://placehold.it/50x50) no-repeat;
text-indent: 50px;
}
Since the text is longer than 50 pixels wide, it wraps around. Only the first line is indented by 50 pixels.
The negative indentation technique arose before pseudo-element support or wrapper control was widespread. It does the job well enough so people don't change how they act when a new / better way comes along.
Your proposal is very close to one of the modern methods, although
http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
source to share