以下のような、スプライト画像を使ってる時や、CMSで空タグ置けないとかの時に便利。
SEO的にも空タグはよろしくないでしょうし・・・

サンプル

画像です

画像です

上記は右側の画像を背景において、background-positionでホバーを動かしています。
こんなときはテキストを消したいですね

その1 text-indent-9999pxで画面外へ葬り去る

画像です

html
<p class="txt_erase01">画像です</p>
css
	p.txt_erase01{
		text-indent: -9999px;
	}

上記は昔ながらの方法で、インデント量-9999pxで画面外へ飛ばす方法。
SEO的によろしくないって事で最近あんまり使用しないですね。

その2 font-size0pxで豆粒以下に滅する

画像です

html
<p class="txt_erase02">画像です</p>
css
	p.txt_erase02{
		font-size: 0;
	}

こちらはフォントサイズを0にして強制的にテキストを消して方法
こちもSEO的にはよろしくないみたいですけどね

その3 text-indent100%ではみ出たところを消し去る

画像です

html
<p class="txt_erase03">画像です</p>
css
	p.txt_erase03{
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
	}

こちらは何をやっているかというと、まずtext-indent100%で100%分テキストをずらします。
white-space:nowrapで改行を消し去り、要素よりはみ出たものをoverflow: hiddenで非表示にしております。

要素分ずらしてるのでindent90%位にするとテキストがチラ見えしますw。ブラウザ解釈や他のCSSが当たってまれにチラ見えしてることがあるのですが、100%以上を設定すると一応消えますw

google先生いわく、画面外にテキスト飛ばすと、隠し文字と認定するよ~って言ってますので、コレはありなんでしょうかね・・・w

なんでSEO的にダメかは、下記google先生リンクをご覧ください。

Search Console ヘルプ 隠しテキストと隠しリンク

LIvedoorブログはSPが調整できません。
お手数ですが
こちらよりPCサイトへ移動してください