cssでhtmlに文字を書く方法

便利なcontentプロパティ

contentプロパティ

CSSはHTMLのスタイルを調整するファイルですが、CSSでHTMLに文字を書きこむ方法があります。

疑似要素の:beforeと:afterに指定出来るcontentプロパティというものを使います。

使用例

例えば2020年に地球が消滅するだろうという大予言をブログで書いたとすると…

もし2020年になっても地球が消滅しなかったら、大嘘付き野郎になってしまいますよね。

そういう時は2020年を2030年に変えてしまえば解決する訳ですが、色んな所に書いていると正直全部変えるのはめんどくさいですよね。

なので、以下のようにHTMLには年号以外の部分を書きこみ…

<div>
  <p>年に空から隕石が降ってきて地球は消滅するだろう。</p>
</div>

CSSで以下のように指定しておきます。

p:before {
  content:"2020";
}

するとHTMLでの表示は

2020年に空から隕石が降ってきて地球は消滅するだろう。

となります。

この書き方なら、いろーんなページに大嘘を書いたとしても

CSSのたった１行を編集するだけで年号を2030年とかに変えられるので、

永久に嘘つき呼ばわりされなくて済みますね。

と言うのはもちろん冗談ですが、

HTMLで新着情報等を更新している人がNEWマークを表示させたりするのが一般的な使い方のようですね。

個人的には以前レンタルショッピングカートでショッピングサイトを作成した際に、

HTMLは編集出来ないページなんだけど注意書を入れたい…どうする！？という場合に使えました。

おまけ↓

テキスト以外も表示できる！

contentプロパティで表示できるのはテキストだけじゃぁありません。

画像を表示

画像のURLを指定すれば画像を表示できます。

書き方：「a要素の:beforeの場合」

a:before {
  content : url(画像のパス);
}

例えばダウンロードアイコン等に使えますね。

カウンター

ちょっぴりややこしいのですが、

counter-incrementで任意の名前を付けた要素をナンバーをカウントして表示することができます。

書き方：liという要素にmokeという名前のcounter-incrementを指定した例

li {
  counter-increment :moke;
}

li:bofore {
  content : "第" counter(moke) "回選抜○▲×";
}

というように記入すると…

第１回選抜○▲×

第2回選抜○▲×

第3回選抜○▲×

と言うような表示が可能になります。

title属性

attr(title)を指定することで、要素のtitle属性を表示する事が出来ます。

マウスオーバー等でタイトルをスタイリッシュに表示させたい時等につかえますかね。

p:before {
  content :"title";
}

URL

attr(href)を指定する事で要素のURLを表示する事が出来ます。

これも何となく便利な気はするのですが使いどころは限られそうですね。

a:before {
  content : attr(href);
}

他にも何かあったかな～…