参照元（[CSS]画像置換「-9999px」のパフォーマンスを改善した新しいテクニック | コリス）
リンクなどを画像に置換する場合、普通は
<p><a><img src="画像ファイル" alt"画像文章" /></a></p>
で片が付くわけですが、WordPressなどで既存テーマをカスタマイズして使っている場合、どうしてもリンクが文字列で、画像を置きたいときにはCSSのbackground-imageを使ってやらざるを得ない場合もあります。
で、普通に背景画像を設置すると画像の前に文字列が来てしまうので、これをどうにか処理しなければならないと。
以前はネガティブマージンで文字列を画面の外に吹き飛ばす方法が知られていましたが、ここで紹介されているのは要素の外に追い出し、それを表示させないという処理。
やり方は、背景画像を設置した文字列にクラスを設定し、CSSに次の設定を書き込む。
text-indent: 110%;
white-space: nowrap;
overflow: hidden;
text-indentで文字列を枠外（右端の外）にはじき出し、かつoverflow:hidden;で外に出た文字列を非表示にする。
また、white-space:nowrap;で改行禁止とすることでレイアウト崩れを防止する。
元ネタのサイトでは、text-indent:100%;とされていますが、border や padding の設定によっては文字のアタマ半分くらいが見えたりするので、ここは100%より大きい数字を入れるのが良いです。
