content

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

content は CSS のプロパティで、ある要素を生成された値で置き換えます。これは、要素または擬似要素の内部でレンダリングされるものを定義するために使用することができます。要素の場合、 content プロパティは、要素が通常通りレンダリングされるか（normal または none）、画像（および関連付けられた "alt" テキスト）に置き換えられるかを指定します。擬似要素とマージンボックスの場合、 content は、コンテンツを画像、テキスト、その両方、またはなしとして定義し、要素が全体的にレンダリングされるかどうかを決定します。

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

試してみましょう

構文

css

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

/* <image> 値 */
content: url("http://www.example.com/test.png");
content: linear-gradient(#e66465, #9198e5);
content: image-set("image1x.png" 1x, "image2x.png" 2x);

/* 生成コンテンツの代替テキスト、レベル 3 の仕様書で追加 */
content: url("../img/test.png") / "This is the alt text";

/* <string> 値 */
content: "unparsed text";

/* <counter> 値、任意で <list-style-type> */
content: counter(chapter_counter);
content: counter(chapter_counter, upper-roman);
content: counters(section_counter, ".");
content: counters(section_counter, ".", decimal-leading-zero);

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

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

/* normal と none を除き、複数の値が同時に使用可 */
content: "prefix" url(http://www.example.com/test.png);
content: "prefix" url("/img/test.png") "suffix" / "Alt text";
content: open-quote counter(chapter_counter);

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

値

値は次のいずれかです。

2 つのキーワード値のうちの 1 つ - none または normal
DOM ノードを置き換える場合は <content-replacement>。 <content-replacement> は常に <image> です。
擬似要素とマージンボックスを置き換える場合は <content-list>。 <content-list> は、指定された順で現れる 1 つ以上の無名ボックスのリストです。 <content-list> のアイテムは <string>、<image>、<counter>、<quote>、<target>、<leader()> のいずれかです。
オプションの代替テキスト値として、スラッシュ (/) で始まる <string> または <counter> を使用できます。

上記で挙げたキーワードとデータ型については、下記でさらに詳しく説明します。

none

擬似要素に適用された場合は、その擬似要素は生成されません。要素に適用された場合は、この値は効果がありません。

normal

既定値です。 ::before および ::after 擬似要素では none として計算されます。それ以外の擬似要素では、 ::marker、::placeholder、::file-selector-button において、コンテンツは初期（または通常）コンテンツが期待されます。通常の要素またはページマージンボックスの場合、これは要素の子孫に計算されます。

<string>

一致する単一引用符または二重引用符で囲まれた文字の並び。複数の文字列値は連結されます（CSS には連結演算子はありません）。

<image>

<image> で、表示する画像を表します。 <url>、image-set()、<gradient> のデータ型、または element() 関数で定義されるウェブページ自身の一部です。

<counter>

<counter> の値は CSS カウンターの値で、通常は <counter-reset> および <counter-increment> プロパティで定義され、計算によって生み出される数値です。 counter() または counters() 関数を使用して表示することができます。

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

<quote>

<quote> データ型には、言語または位置に依存したキーワードです。

open-quote および close-quote: これらの値は、適切な quotes プロパティで指定された適切な文字列に置き換えられます。
no-open-quote および no-close-quote: コンテンツには何も挿入されませんが、引用符の入れ子レベルが増加（減少）します。

<target>

<target> データ型には、リンクのターゲット側から取得した相互参照を作成する 3 つのターゲット関数、<target-counter()>、<target-counters()>、<target-text()> が含まれます。形式文法を参照してください。

<leader()>

<leader()> データ型には、リーダー関数として leader( <leader-type> ) が含まれます。この関数は、キーワード値 dotted、solid、または space （それぞれ leader(".")、leader("_")、leader(" ") に相当）、または <string> を引数として受け入れます。対応していて、content の値として使用された場合、指定されたリーダーの種類は繰り返しパターンとして挿入され、水平線上のコンテンツを視覚的に接続します。

attr(x)

CSS 関数 attr(x) は、選択された要素、または擬似要素の元となる要素の属性値を取得します。要素の属性 x の値は、属性名を表す解釈前の文字列です。属性 x が存在しない場合は、空文字列が返値として返されます。属性名引数の大文字小文字の区別は、文書内の言語に依存します。

代替テキスト: / <string> | <counter>

画像や <content-list> アイテムには、スラッシュとテキスト文字列またはカウンターを追加することで代替テキストが指定できます。代替テキストは、スクリーンリーダーによる音声出力に意図通りに機能しますが、一部のブラウザーでも表示される場合があります。ブラウザーが代替テキストに対応していない場合、 content 宣言は不正なものと見なされ、無視されますのでご注意ください。 / <string> または / <counter> データ型で、この要素の「代替テキスト」を表します。

公式定義

初期値	`normal`
適用対象	すべての要素、ツリーに現れる擬似要素、ページのマージンボックス
継承	なし
計算値	要素の場合は、常に `normal` と計算される。 `::before` および `::after` の場合、 `normal` が指定されていれば計算値は `none`。それ以外の場合、 URI 値の場合は絶対 URI、 `attr()` 値の場合は結果の文字列、その他のキーワードについては指定通り。
アニメーションの種類	離散値

形式文法

content = 
  normal                                              |
  none                                                |
  [ <content-replacement> | <content-list> ] [ / [ <string> | <counter> | <attr()> ]+ ]?  |
  <element()>                                         

<content-replacement> = 
  <image>  

<content-list> = 
  [ <string> | <counter()> | <counters()> | <content()> | <attr()> ]+  

<counter> = 
  <counter()>   |
  <counters()>  

<attr()> = 
  attr( <attr-name> <attr-type>? , <declaration-value>? )  

<element()> = 
  element( <id-selector> )  

<image> = 
  <url>       |
  <gradient>  

<counter()> = 
  counter( <counter-name> , <counter-style>? )  

<counters()> = 
  counters( <counter-name> , <string> , <counter-style>? )  

<content()> = 
  content( [ text | before | after | first-letter | marker ]? )  

<attr-name> = 
  [ <ident-token>? '|' ]? <ident-token>  

<attr-type> = 
  type( <syntax> )  |
  string            |
  <attr-unit>       

<id-selector> = 
  <hash-token>  

<url> = 
  <url()>  |
  <src()>  

<counter-style> = 
  <counter-style-name>  |
  <symbols()>           

<syntax> = 
  '*'                                                 |
  <syntax-component> [ <syntax-combinator> <syntax-component> ]*  |
  <syntax-string>                                     

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )  

<symbols()> = 
  symbols( <symbols-type>? [ <string> | <image> ]+ )  

<syntax-component> = 
  <syntax-single-component> <syntax-multiplier>?  |
  '<' transform-list '>'                          

<syntax-combinator> = 
  '|'  

<syntax-string> = 
  <string>  

<symbols-type> = 
  cyclic      |
  numeric     |
  alphabetic  |
  symbolic    |
  fixed       

<syntax-single-component> = 
  '<' <syntax-type-name> '>'  |
  <ident>                     

<syntax-multiplier> = 
  '#'  |
  '+'  

<syntax-type-name> = 
  angle               |
  color               |
  custom-ident        |
  image               |
  integer             |
  length              |
  length-percentage   |
  number              |
  percentage          |
  resolution          |
  string              |
  time                |
  url                 |
  transform-function

アクセシビリティ

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

挿入されたコンテンツが装飾的なものでない場合は、支援技術に情報が指定され、 CSS が無効の場合にも利用できることを確認してください。

例

最初の 5 つの例は、擬似要素に生成コンテンツを生成させるものです。残りの 3 つは要素の置換の例です。

要素のクラスに基づいて文字列を追加

例えば、この例では、特定のクラス名を持つ要素のテキストの後に、生成されたテキストが挿入されます。テキストは赤色で表示されます。

HTML

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

css

.new-entry::after {
  content: " New!"; /* 先頭の空白は、 DOM ノードのコンテンツと
                       追加する生成コンテンツを分離するための
                       ものです。 */
  color: red;
}

結果

引用符

この例では、引用部分の周りに異なる色の引用符を挿入します。

HTML

html

<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>
<p lang="fr-fr">
  Mais c'est Magritte qui a dit,
  <q lang="fr-fr"> Ceci n'est pas une pipe. </q>.
</p>

CSS

css

q {
  color: #00f;
}

q::before,
q::after {
  font-size: larger;
  color: #f00;
  background: #ccc;
}

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

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

結果

生成される引用符の種類は、言語によって異なります。ブラウザーは既定では、 <q> 要素の前後に開始引用符と終了引用符を追加します。例えば、この例の引用符は、明示的に設定されていない場合でも表示されます。 content プロパティの値をそれぞれ no-open-quote と no-close-quote に設定するか、または両方を none に設定することで、引用符を無効にすることができます。また、代わりに quotes プロパティを none に設定することで、引用符を無効にすることもできます。

テキストをリストアイテムカウンターに追加

この例では、すべてのリストアイテムの先頭に追加された 2 つの文字列で挟まれたカウンターを結合し、順序なしリスト (<ol>) 内のリストアイテム (<li>) に対して、より詳細なマーカーを作成します。

HTML

html

<ol>
  <li>犬</li>
  <li>猫</li>
  <li>
    鳥
    <ol>
      <li>フクロウ</li>
      <li>オウム</li>
      <li>飛べない鳥</li>
    </ol>
  <li>有袋類</li>
  </li>
</ol>

CSS

css

ol {
  counter-reset: items;
  margin-left: 2em;
}
li {
  counter-increment: items;
}
li::marker {
  content: "item " counters(items, ".", numeric) ": ";
}

結果

各リストアイテムのマーカーで生成されたコンテンツには、接頭辞として "item" というテキストが追加され、接頭辞とカウンターを区切る空白が含まれ、次の ": "、コロン、さらに空白が続きます。 counters() 関数は、数値アイテムカウンターを定義し、その数値は、ほとんどのブラウザーではピリオド (.) で区切られます。

属性値の文字列

この例は、印刷用スタイルで有用です。このスタイルシートは属性セレクターを使用して、完全修飾された保護されたリンクをすべて選択し、リンクテキストの後に href 属性の値を ::after 擬似要素のコンテンツとして追加します。

HTML

html

<ul>
  <li><a href="https://mozilla.com">Mozilla</a></li>
  <li><a href="/">MDN</a></li>
  <li><a href="https://openwebdocs.org">OpenWebDocs</a></li>
</ul>

CSS

css

a[href^="https://"]::after
{
  content: " (URL: " attr(href) ")";
  color: darkgreen;
}

結果

生成されたコンテンツは、空白付きの "URL: " と href 属性の値の全体を括弧で囲んだものです。

代替テキスト付きの画像を追加

この例では、すべてのリンクの前に画像を挿入します。2つのcontent値が提供されています。後の方のcontent値には、スクリーンリーダーが音声として出力できる代替テキスト付きの画像が記載されています。ブラウザーが代替テキストに対応していない場合、この宣言は無効と見なされ、前のcontent値が表示されます。この代替コンテンツのリストには、画像と「- alt テキストに対応していません - 」というメッセージが含まれています。

HTML

html

<a href="https://www.mozilla.org/ja/">Mozilla Home Page</a>

CSS

画像を表示させ、代替テキストを設定するCSSは下記に示します。また、コンテンツのフォントと色も設定します。これは、代替テキストを「表示」するブラウザーで使われ、代替テキストに対応していないブラウザーでは、代替の content 値を表示します。

css

a::before {
  /* 代替コンテンツ */
  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico")
    " - alt テキストに対応していません - ";
  /* 代替テキスト付きのコンテンツ */
  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") /
    " MOZILLA: ";
  font:
    x-small Arial,
    sans-serif;
  color: gray;
}

結果

メモ: 代替テキストの構文に対応している場合、値はブラウザーのアクセシビリティツリーに公開されます。ブラウザーごとのアクセシビリティパネルについては、関連情報の節を参照してください。

スクリーンリーダーを使用している場合は、画像に到達したときに "MOZILLA" という単語が読み上げられるはずです。対応している場合場合（「alt テキストに対応していません」と表示されていない場合）、開発者ツールの選択ツールで ::before 擬似要素を選択し、アクセシビリティパネルでアクセシブル名を表示することができます。

代替テキストの構文に対応していないブラウザーでは、代替テキストを含む宣言全体が無効となります。この場合、前の content 値が使用され、画像と「代替テキストに対応していません」というテキストが表示されます。

URL による要素の置換

この例では、通常の要素が置き換えられます。要素のコンテンツは、 <url> 型を使用して SVG に置き換えられます。

擬似要素は置換要素ではレンダリングされません。この要素が置換されるため、::after または ::before と一致するものは生成も適用もされません。これを示すために、 ::after 宣言ブロックを記載し、生成コンテンツとして id を追加しようとします。この擬似要素は、要素が置換されるため生成されません。

HTML

html

<div id="replaced">このコンテンツが置き換えられます。</div>

CSS

css

#replaced {
  content: url("mdn.svg");
}

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

結果

（擬似要素ではなく）通常の要素でコンテンツを生成する場合、要素全体が置き換えられます。すなわち、 ::before および ::after 擬似要素が生成されないということを意味しています。

`<gradient>` による要素の置換

この例では、要素のコンテンツを任意の種類の <image> （この場合は CSS グラデーション）に置き換える方法を示しています。要素のコンテンツは linear-gradient() に置き換えられています。 @supports により、代替テキストの対応と、 alt テキストに対応しているブラウザー用の repeating-linear-gradient() が指定されています。

HTML

html

<div id="replaced">ここは消えます</div>

CSS

css

div {
  border: 1px solid;
  background-color: #ccc;
  min-height: 100px;
  min-width: 100px;
}

#replaced {
  content: linear-gradient(#639f, #c96a);
}

@supports (content: linear-gradient(#000, #fff) / "代替テキスト") {
  #replaced {
    content: repeating-linear-gradient(blue 0, orange 10%) /
      "グラデーションと代替テキストに対応しています";
  }
}

結果

ブラウザーの互換性一覧表を確認してください。すべてのブラウザーがグラデーションに対応しており、また、すべてのブラウザーが要素を画像で置き換えることができますが、コンテンツ値としてグラデーションに対応しているブラウザーは限られており、また、代替テキストつきで要素を置き換えることに対応しているブラウザーも限られています。グラデーションのないボックスが表示されるブラウザーでは、要素の置き換えは対応していますが、コンテンツの置き換え値としてグラデーションは対応していません。要素が縞模様のグラデーションで置き換えられている場合、ブラウザーはどちらにも対応しています。

`image-set()` による要素の置換

この例では、要素のコンテンツを image-set() で置き換えます。ユーザーの画面の解像度が標準であれば、 1x.png が画面に表示され、高解像度の画面では 2x.png の画像が表示されます。

HTML

html

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

CSS

div {
  width: 100px;
  border: 1px solid lightgrey;
}

css

#replaced {
  content: image-set(
    "1x.png" 1x,
    "2x.png" 2x
  );
}

結果

仕様書

Specification
CSS Generated Content Module Level 3 # content-property

ブラウザーの互換性

BCD tables only load in the browser