CSScontent プロパティは、要素を生成された値で置き換えます。 content プロパティを使用して挿入されたオブジェクトは、無名の置換要素になります。

/* 他の値と組み合わせることができないキーワード */
content: normal;
content: none;

/* <url> 値 */
content: url("http://www.example.com/test.png");

/* <image> 値 */
content: linear-gradient(#e66465, #9198e5);

/* 以下の値は ::before および ::after を使用して生成されたコンテンツにのみ適用 */

/* <string> 値 */
content: "prefix";

/* <counter> 値 */
content: counter(chapter_counter);
content: counters(section_counter, ".");

/* HTML 属性値にリンクした attr() 値 */
content: attr(value string);

/* 言語や位置に依存したキーワード */
content: open-quote;
content: close-quote;
content: no-open-quote;
content: no-close-quote;

/* normal 及び none を除いて、複数の値が
   同時に使用可 */
content: open-quote chapter_counter;

/* グローバル値 */
content: inherit;
content: initial;
content: unset;

初期値normal
適用対象::before / ::after 疑似要素
継承なし
メディアすべて
計算値通常要素で使われると常に normal::before 及び ::after では: normal の指定があれば計算値は none。指定がなければ、
  • URI 値は、絶対的 URI となる
  • attr() 値は、計算値の文字列となる
  • その他のキーワードについては指定どおり
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

構文

none
疑似要素は生成されません。
normal
:before 及び :after 疑似要素では none として計算されます。
<string>
任意の数のテキスト文字です。ラテン文字以外は Unicode エスケープシーケンスを使用してエンコードする必要があります。例えば、 \000A9 は著作権記号を表します。
<url>
画像等の外部リソースの URI を指定します。リソースが表示出来ない場合は、値が無視されるか、または何らかのプレースホルダーが表示されます。
<image>
<url> または <gradient> データ型で示された <image>、または表示するコンテンツを記述する element() 関数で定義されたウェブページの一部です。
<counter>
CSS カウンターの値で、通常は数値です。 counter() または counters() 関数を使用して表示することができます。

counter() 関数には、 'counter(名前)' 又は 'counter(名前, スタイル)' の二つの形式があります。生成されるテキストは、その疑似要素のスコープにおけるその名前の最も内側のカウンターです。指定されたスタイルで整形されます (decimal が既定値です)。

counters() 関数も、 'counters(名前, 文字列)' 又は 'counters(名前, 文字列, スタイル)' の二つの形式があります。生成されるテキストは、その疑似要素のスコープにおけるその名前のすべてのカウンターの値であり、外側から内側に向けて、指定された文字列で区切られます。カウンターは指定されたスタイルで表示されます(decimal が既定値です)。

attr(x)
要素の属性の値 x を文字列として返します。属性 x が存在しない場合は、空文字列が返されます。属性名の大文字と小文字が区別されるかどうかは、文書の言語に依存します。
open-quote | close-quote
これらの値は quotes プロパティの対応する文字列に置き換えられます。
no-open-quote | no-close-quote
内容はありませんが、引用符の入れ子の階層を増加 (または減少) させます。

形式文法

normal | none | [ <content-replacement> | <content-list> ] [/ <string> ]?

where
<content-replacement> = <image>
<content-list> = [ <string> | contents | <image> | <quote> | <target> | <leader()> ]+

where
<image> = <url> | <image()> | <image-set()> | <element()> | <cross-fade()> | <gradient>
<quote> = open-quote | close-quote | no-open-quote | no-close-quote
<target> = <target-counter()> | <target-counters()> | <target-text()>
<leader()> = leader( <leader-type> )

where
<image()> = image( [ [ <image> | <string> ]? , <color>? ]! )
<image-set()> = image-set( <image-set-option># )
<element()> = element( <id-selector> )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>
<target-counter()> = target-counter( [ <string> | <url> ] , <custom-ident> , <counter-style>? )
<target-counters()> = target-counters( [ <string> | <url> ] , <custom-ident> , <string> , <counter-style>? )
<target-text()> = target-text( [ <string> | <url> ] , [ content | before | after | first-letter ]? )
<leader-type> = dotted | solid | space | <string>

where
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
<image-set-option> = [ <image> | <string> ] <resolution>
<id-selector> = <hash-token>
<cf-mixing-image> = <percentage>? && <image>
<cf-final-image> = <image> | <color>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<counter-style> = <counter-style-name> | symbols()

where
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
<side-or-corner> = [ left | right ] || [ top | bottom ]
<color-stop-list> = <color-stop>#{2,}
<ending-shape> = circle | ellipse
<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
<counter-style-name> = <custom-ident>

where
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
<color-stop> = <color> <length-percentage>?
<length-percentage> = <length> | <percentage>

見出しと引用符

この例では引用部分の周りに引用符を挿入し、見出しの前に "Chapter" の語を追加します。

HTML

<h1>5</h1>
<p>According to Sir Tim Berners-Lee,
  <q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet">I was
    lucky enough to invent the Web at the time when the Internet
    already existed - and had for a decade and a half.</q>
  We must understand that there is nothing fundamentally wrong
  with building on the contributions of others.
</p>

<h1>6</h1>
<p>According to the Mozilla Manifesto,
  <q cite="http://www.mozilla.org/en-US/about/manifesto/">Individuals
    must have the ability to shape the Internet and
    their own experiences on the Internet.</q>
  Therefore, we can infer that contributing to the open web
  can protect our own individual experiences on it.
</p>

CSS

q {
  color: blue;
}

q::before {
  content: open-quote;
}

q::after {
  content: close-quote;
}

h1::before  {
  content: "Chapter ";  /* 最後の空白は、追加コンテンツと
                           残りのコンテンツの間を隔てる
                           ものです */
}

結果

テキストと組み合わせる画像

この例はリンクの前に画像を挿入します。画像が見つからなければ、代わりにテキストを挿入します。

HTML

<a href="http://www.mozilla.org/en-US/">Mozilla Home Page</a>

CSS

a::before {
  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") " MOZILLA: ";
  font: x-small Arial, sans-serif;
  color: gray;
}

結果

クラスのターゲッティング

この例はリストの特定の項目の後に追加のテキストを挿入します。

HTML

<h2>Paperback Best Sellers</h2>
<ol>
  <li>Political Thriller</li>
  <li class="new-entry">Halloween Stories</li>
  <li>My Biography</li>    
  <li class="new-entry">Vampire Romance</li>
</ol>

CSS

.new-entry::after {
  content: " New!";  /* 先頭の空白は、追加コンテンツと
                        残りのコンテンツの間を隔てる
                        ものです */
  color: red;
}

結果

画像及び要素の属性

この例はそれぞれのリンクの前に画像を挿入し、後に id 属性を追加します。

HTML

<ul>
  <li><a id="moz" href="http://www.mozilla.org/">
    Mozilla Home Page</a></li>
  <li><a id="mdn" href="https://developer.mozilla.org/">
    Mozilla Developer Network</a></li>
</ul>

CSS

a {
  text-decoration: none;
  border-bottom: 3px dotted navy;
}

a::after {
  content: " (" attr(id) ")";
}

#moz::before {
  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") ;
}

#mdn::before {
  content: url("https://mdn.mozillademos.org/files/7691/mdn-favicon16.png") ;
}

li {
  margin: 1em;
}

結果

要素の置き換え

この例は要素の内容を画像で置き換えます。要素の内容は <url> またはその他の <image> の値のどちらかで置き換えます。 ::before または ::after で追加された内容は、要素の中身が置き換えられるときは生成されません。

HTML

<div id="replaced">Mozilla</div>

CSS

#replaced {
  content: url("https://mdn.mozillademos.org/files/12668/MDN.svg");
}

#replaced::after { /* 要素の置換に対応している場合は表示されない */
  content: " (" attr(id) ")"; 
}

結果

アクセシビリティの考慮事項

CSS の生成コンテンツは DOM に含まれません。そのため、アクセシビリティツリーに現れず、支援技術とブラウザーの組み合わせによってはアナウンスされません。コンテンツがページの目的を理解する上で重要な情報を持つのであれば、文書本体に含めた方が適切です。

仕様書

仕様書 状態 備考
CSS Generated Content Module Level 3
content の定義
草案  
CSS Level 2 (Revision 1)
content の定義
勧告 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 8Opera 完全対応 4Safari 完全対応 1WebView Android 完全対応 1Chrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 9.5Safari iOS 完全対応 1Samsung Internet Android 完全対応 あり
Element replacementChrome 完全対応 ありEdge ? Firefox 完全対応 63IE ? Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android ? Edge Mobile ? Firefox Android 完全対応 63Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
url()Chrome 完全対応 1Edge ? Firefox 完全対応 1IE 完全対応 8Opera 完全対応 7Safari 完全対応 1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明

関連情報

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

このページの貢献者: mfuji09, Sebastianz, ethertank, sosleepy
最終更新者: mfuji09,