以下のような、スプライト画像を使ってる時や、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先生リンクをご覧ください。