content

by 2 contributors:

概要

content プロパティは、::before 疑似要素及び ::after 疑似要素をその対象とし、これらの内容を生成する CSS プロパティです。content プロパティを使って挿入されたオブジェクトは匿名の置換要素です。

  • 初期値 normal
  • 適用対象 ::before 疑似要素及び :after 疑似要素
  • 継承 継承しない
  • メディア all
  • 計算値通常要素で使われると常に normal。::before 及び ::after では: normal の指定があれば計算値は none。指定がなければ、
    • URI 値は、絶対的 URI となる
    • attr() 値は、計算値の文字列となる
    • その他のキーワードについては指定どおり

構文

content: normal | none | 
       [ <string> | <uri> | <counter> | attr() | 
         open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit

none
疑似要素を生成しない
normal
:before 疑似要素及び :after 疑似要素では none となります。
<string>
テキスト
<uri> url()
画像等の外部リソースの URI を指定します。リソースが表示出来ない場合は、値が無視されるか、または何らかのプレースホルダーが表示されます。
<counter>
カウンターの値を疑似要素の内容として出力する
attr(X)
要素の属性の値 X を文字列として返します。属性 X が存在しない場合は、空文字が返されます。属性名の大文字 / 小文字 が区別されるかどうかは、文書のマークアップ言語の種類によって異なります。
open-quote | close-quote
開始引用符、終了引用符を指定します。content プロパティの値にこれらのキーワードを指定するより、 quotes プロパティを用いる方法の方がより詳細な設定が可能です。
no-open-quote | no-close-quote
引用符や他の内容物は表示されませんが、引用符の入れ子階層数のカウントの増減(インクリメント / デクリメント)が行われます。

q:lang(en) { quotes: '"' '"' "'" "'" }
q:before   { content: open-quote }
q:after    { content: close-quote }
h1:before  { content: "Chapter: " }
/* content accepts multiple values */

a:before {
  content: url(http://www.mozilla.org/favicon.ico) " MOZILLA: "; 
  font:    x-small Arial,freeSans,sans-serif;
  color:   gray;
}

jsFiddle で確認

仕様

仕様書 策定状況 コメント
CSS 2.1 勧告  

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 1.0 1.0 (1.7 or earlier) 8.0 4.0 1.0
url() のサポート 1.0 1.0 (1.7 or earlier) 8.0 7.0 1.0
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート 1.0 1.0 (1.0) 8.0 9.5 1.0

関連情報

ドキュメントのタグと貢献者

Contributors to this page: ethertank, sosleepy
最終更新者: ethertank,
サイドバーを隠す