content

div.test:after { content: none;}
div.test1:after { content: normal;}
div.test2:after { content: "テキストを挿入";}
div.test3:after { content: url(/img/sample.jpg);}

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

『: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>