content

概要

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

構文

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

値

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(https://www.mozilla.org/favicon.ico) " MOZILLA: "; 
  font:    x-small Arial,freeSans,sans-serif;
  color:   gray;
}

JSFiddle で確認

仕様

ブラウザ実装状況

関連情報

• CSS プロパティ: :after 、:before 、quotes