content

style.css

/* コンテンツなし（初期値） */
div.test:after { content: none;}

/* 通常の表示（::before/::after のリセットに使用） */
div.test1:after { content: normal;}

/* テキストを挿入 */
div.test2:after { content: "テキストを挿入";}

/* 画像を挿入 */
div.test3:after { content: url(/img/sample.jpg);}

/* 空文字列（clearfixなどで使用） */
.clearfix::after { content: ""; display: table; clear: both;}

/* 外部リンクアイコンを::after で追加 */
a[target="_blank"]::after { content: " ↗";}

/* 属性値を挿入（attr() 関数） */
a::after { content: " (" attr(href) ")";}

/* 必須フィールドのラベルにアスタリスクを追加 */
.required::before { content: "* "; color: red;}

/* カウンターを使った自動番号付け */
.list-item::before { content: counter(item) ". "; counter-increment: item;}

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

デスクトップ

Chrome

1 以降 ○

Firefox

1 以降 ○

Safari

1 以降 ○

Edge

12 以降 ○

IE

11 ○

10 ○

9 ○

8 ○

7 ×

6 ×

Opera

4 以降 ○

3 以前 ×

モバイル

iOS Safari

1 以降 ○

Android Browser

4.4 以降 ○

3 以前 ×

Chrome Android

最新版 ○

デスクトップ版と同等の対応です

Firefox Android

最新版 ○

デスクトップ版と同等の対応です

※ バージョン情報は MDN に基づいています。

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