Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSSプロパティ辞典

content

『:before擬似要素』および『:after擬似要素』に対して文字列や画像などの要素を挿入します。

サンプルコード
div.test:after { content: none;}
div.test1:after { content: normal;}
div.test2:after { content: "テキストを挿入";}
div.test3:after { content: url(/img/sample.jpg);}
指定可能な値一覧
概要
none要素を挿入しません。この『none』が『:before擬似要素』および『:after擬似要素』の初期値です。
normal要素を挿入しません。この『normal』が『:before擬似要素』および『:after擬似要素』以外の要素の初期値です。
文字列『:before擬似要素』および『:after擬似要素』に対して文字列を挿入します。
url()『:before擬似要素』および『:after擬似要素』に対して画像等の外部ファイルを挿入します。
ブラウザでの表示結果
<style scoped>
    div:after { content: none;}
</style>
<p>以下はdiv要素(黄色い背景の要素)に対して『<span style="color: #f00;">div:after { content: none;}</span>』と指定しています。</p>
<div style="background-color: yellow; padding: 10px;"></div>

<style scoped>
    div:after { content: "テキストを挿入";}
</style>
<p>以下はdiv要素(黄色い背景の要素)に対して『<span style="color: #f00;">div:after { content: "テキストを挿入";}</span>』と指定しています。</p>
<div style="background-color: yellow; padding: 10px;"></div>

<style scoped>
    div:after { content: url(/dictionary-css/img/sample.jpg);}
</style>
<p>以下はdiv要素(黄色い背景の要素)に対して『<span style="color: #f00;">div:after { content: url(/dictionary-css/img/sample.jpg);}</span>』と指定しています。</p>
<div style="background-color: yellow; padding: 10px;"></div>

対応ブラウザ
IE6 IE7 IE8 IE9 IE10 IE11 Safari Chrome Firefox Opera

iPhone Safari Android2系 標準ブラウザ Android4系 標準ブラウザ

概要

『:before擬似要素』および『:after擬似要素』に対して文字列や画像などの要素を挿入します。『content』プロパティを使用して生成された要素は『匿名の置換要素』となります。

この『content』プロパティが使用できるのは『:before擬似要素』および『:after擬似要素』のみとなります。『:before擬似要素』および『:after擬似要素』以外の要素の初期値は『none』ではなく『normal』となっていますが、そもそも『content』プロパティが反映されないため特に意識する必要はないでしょう。

尚、『:before擬似要素』および『:after擬似要素』を使用して何かしらの要素を生成したい、といった場合にはこの『content』プロパティの指定は必須となります。その場合は『content: ""』といったような形で『空文字列』を指定するのが一般的です。『content』プロパティが初期値の『none』のままだと領域すら生成されませんのでご注意ください。

div:after { display: block; height: 50px;}
<p>以下はdiv要素(黄色い背景の要素)に:after擬似要素を使用して隙間を作ろうとしています。しかし、『content』プロパティの指定がないため:after擬似要素が生成されず、隙間が作れていない状態です。</p>
<div style="background-color: yellow;">ここはdiv要素です。隙間を作りたいです。</div>

div:after { content: ""; display: block; height: 50px;}
<p>以下はdiv要素(黄色い背景の要素)に:after擬似要素を使用して隙間を作ろうとしています。『content』プロパティの値に空文字列を指定しているため、:after擬似要素が生成されて隙間を作れています。</p>
<div style="background-color: yellow;">ここはdiv要素です。隙間を作りたいです。</div>

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。