contentプロパティ

TOPページに戻る > CSS

contentプロパティ

テキストや画像を要素の前後に表示できます
同じ文字や同じ画像を何度も繰り返し使えるのでワインポイントマークに向いています
テキストと画像両方指定することも可能です
contentプロパティを使えば引用符を自動でつけることもできます
※IE6、IE7が未対応。IE8から対応しています

使い方（書式）

セレクタ { content: 値; }                                    

contentプロパティ

対応ブラウザ
適用できる要素	:before擬似要素　:after擬似要素
子要素へのスタイルの継承	しない

プロパティの値	説明
""	文字列を表示。ダブルクォークションかシングルクォークションで文字を囲む
url()	url(urlを記入)　カッコの中に画像ファイルのurlを記入する
counter()	カウンターを表示する
open-quote	開き引用符を表示する
close-quote	閉じ引用符を表示する
no-open-quote	開き引用符を表示しない
no-close-quote	閉じ引用符を表示しない
attr()	要素の属性の値を表示する

実際の指定方法　要素の前にコンテンツを追加する

.hoge:before {content: "☆文字☆"; }   /* 要素の前に文字を表示します */

.hoge2:before {content: url(li.gif); }  /* 要素の前に画像を表示します */

実際の指定方法　要素の後ろにコンテンツを追加する

.hoge3:after {content: "☆文字☆"; }   /* 要素の後ろに文字を表示します */

.hoge4:after {content: url(maru.gif); }  /* 要素の後ろに画像を表示します */

html部分

<p class="hoge">要素の前に文字を表示します</p>
<p class="hoge2">要素の前に画像を表示します</p>
<p class="hoge3">要素の後ろに文字を表示します</p>
<p class="hoge4">要素の後ろに画像を表示します</p>

実際の表示

要素の前に文字を表示します

要素の前に画像を表示します

要素の後ろに文字を表示します

要素の後ろに画像を表示します

文字と画像を同時に表示

.hoge5:before {content: "☆文字☆" url(li.gif); } /* 要素の前に文字と画像を表示します */

html部分

<p class="hoge5">要素の前に文字と画像を表示します</p>

実際の表示

要素の前に文字と画像を表示します