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

サンプル

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

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

html

<p class="txt_erase01">画像です</p>

css

	p.txt_erase01{
		text-indent: -9999px;
	}

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

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

html

<p class="txt_erase02">画像です</p>

css

	p.txt_erase02{
		font-size: 0;
	}

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

その３　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%位にするとテキストがチラ見えしますｗ。ブラウザ解釈や他のCSSが当たってまれにチラ見えしてることがあるのですが、100%以上を設定すると一応消えますｗ

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

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

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

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