contentプロパティのお話（before after 疑似要素に欠かせない）

どーもー。お久しぶりですweb制作にかかわっている人ですー。

先日、私が過去のblogで書いたような内容について同僚が感知しておらず結構伝わらないものだなと軽くへこみました。

結局使わないと覚えないんだけど。
（疑似セレクタについての部分でした）
ただ、書いた本人でさえ書いた内容を詳しくは思いだせないので、ある意味仕方のないことなのかなとも思います。（でも覚えていると便利なこともあるから覚えておいた方がいいとは思ってる）


さて、今回は前振りとは関係なく相変わらずcssのbefore afterにつながるお話です。
今までbefore afterについてぐだぐだ語っていた記事はこちら
「前回の補足っぽい？Before疑似要素・After疑似要素ってなんぞ。」

contentについて語ってみようかと思います。

before after疑似要素を設定する際にこれだけはきちんと設定しないと要素の生成自体がされないということは以前の記事でも書きました（しかし、いまだにうっかり書き忘れることはある）

その名の通りbefore afterの中身を定義するプロパティですが、その値には以下のようなものがあります。

・文字列
好きな文字列を「"」か「'」で括って指定できます（例："new★"）

・URI（URL）でファイルを指定
URI（URL）で画像や音声等のファイルを指定します。
（但し、画像を指定した場合縦横の幅を直接指定することができません。とても残念。サイズを変更したい場合はtransformや、空の文字列を指定して、background-sizeで変更するといった手段がありますが、表示させたいブラウザが対応しているかを確認しなければなりません……）

・カウンタ
要素内容に自動で連番をつけられます。counter()関数、またはcounters()関数で、カウンタ（連番）を呼び出した値が、contentプロパティの値として指定されます。
（例：h3{counter-increment:number(値は任意)}h3:before{content:counter(number);}と指定すると、「<h3>タイトル</h3>」と記述したとき「1(←ここが連番)タイトル」と表示されます）

私がよく使うのはこのくらいですね。
他にもtitle属性など属性に設定された文字列を表示させるattr()や、before、afterの元のタグにquotesプロパティで指定された引用符を挿入するopen-quote,close-quote等があります。

詳しくはこちら
「content -スタイルシートリファレンス-」

たとえば連番について
htmlに直接書き込む場合はうっかり数字を間違えることが考えられますがカウンタを使用すればブラウザで数字が追加表示されるので数字が重複したり抜けたりといったことが起こりません。
まあ便利！

使いどころがそこそこあるプロパティだと思いますので使えるところでは使っていきたいですねー。

それでは、皆さまよい週末をー