スタイルシート（css）の「 content 」について

今回は、スタイルシート（css）の「 content 」についてご紹介します。

何に適用できるのか

contentは、疑似要素の「before」「after」のみに適用することが出来ます。

何が出来るのか

「content」には文字列や画像を指定することが出来ます。疑似要素「before」「after」は指定した要素前後に挿入する要素でした。

ですので、「before」「after」「content」を合わせて使用することで要素の前後に文字列や画像を挿入することが出来ます。

実際に使用している例は次の記事になります。
somegoro.hatenablog.com

「content」に指定できるもの

「content」に指定できるのは文字列や画像だけではありません。次のものを指定することが出来ます。

・文字列
・URI（URL）
・カウンタ
・属性
・引用符

詳しく見ていきましょう。

・文字列

先ほど取り上げた記事中で紹介したとおりの文字列です。

例：content:"うん、";

・URI（URL）

ファイルの場所を指定して、画像や音声を指定することが出来ます。

例：content: url("../2016-test_icon.gif");

・カウンタ

自動で連番を割り当てることが出来ます。

例：content: counter();

・属性

attr()で属性の名前を指定することが出来ます。attr(alt)とすると、alt属性で指定となります。

例：content: attr(alt);

・引用符

開始引用符（open-quote）と終了引用符（close-quote）をそれぞれ指定することが出来ます。

例：content: open-quote;

以上、「 content 」についてご紹介でした。疑似要素を使用できるようになると表現方法が飛躍的に向上するので便利ですよ。より詳しくスタイルシート(css)を学びたい方はこちらをどうぞ。

HTML5&CSS3レッスンブック