Caution
お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。
- トップページ
- CSSプロパティ辞典
- content
TechAcademy(テックアカデミー)
当サイト著者の桜舞春人もメンター(先生)としてちょろりと参加しているTechAcademyさんです。爆速で技術を習得して結果を出したいと考える方に超絶おすすめです。
紹介記事はこちらへどうぞ。
運営及び開発費用ご支援のお願い
当サイト(wp-p.info)の情報はお役に立ちましたでしょうか。当サイトでは運営及び開発費用ご支援の募集をさせて頂いております。よろしければご支援についてご検討頂けませんでしょうか。何卒宜しくお願い致します。
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(/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>
対応ブラウザ
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>
記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。
TechAcademy(テックアカデミー)
当サイト著者の桜舞春人もメンター(先生)としてちょろりと参加しているTechAcademyさんです。爆速で技術を習得して結果を出したいと考える方に超絶おすすめです。
紹介記事はこちらへどうぞ。
Introduction
当サイトでは有料会員様の募集をしております。現在約431本の記事を公開中です。
有料会員になるとこれら全ての記事が読み放題となります。
お申込み頂ける際はログインまたはアカウント作成後、有料会員件をご購入下されば幸いです。有料会員権はまとめ買いがお得です。
現在の有料会員権一覧sale中!!
30日分980円
月額約980円、日額約32円
90日分通常2940円のところ1980円 (960円OFF)
月額約660円、日額約22円
180日分通常5880円のところ2980円 (2900円OFF)
月額約496円、日額約16円
360日分通常11760円のところ4980円 (6780円OFF)
月額約415円、日額約13円