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.

contentCSS のプロパティで、ある要素を生成された値で置き換えます。 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("http://www.example.com/test.png") / "This is the alt text";

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

/* <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(value string);

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

/* normal と none を除き、複数の値が同時に使用可 */
content: open-quote counter(chapter_counter);

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

試してみましょう

構文

none

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

normal

::before および ::after 擬似要素では none として計算されます。

<string>

要素の「代替テキスト」を指定します。この値は任意の数のテキスト文字です。ラテン文字以外は Unicode エスケープシーケンスを使用してエンコードする必要があります。例えば、 \000A9 は著作権記号を表します。

<image>

<image> です。 <url()> または <gradient> データ型、または element() 関数で定義されるウェブページの一部です。

counter()

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

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

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

attr(x)

要素の属性の値 x を文字列として返します。属性 x が存在しない場合は、空文字列が返されます。属性名の大文字と小文字が区別されるかどうかは、文書の言語に依存します。

open-quote | close-quote

これらの値は quotes プロパティの対応する文字列に置き換えられます。

no-open-quote | no-close-quote

内容はありませんが、引用符の入れ子の階層を増加 (または減少) させます。

アクセシビリティの考慮

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

公式定義

初期値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

見出しと引用符

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

HTML

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

css
q {
  color: blue;
}

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

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

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

結果

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

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

HTML

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

CSS

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

結果

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

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

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!"; /* 先頭の空白は、追加コンテンツと
                        残りのコンテンツの間を区切る
                        ものです */
  color: red;
}

結果

画像および要素の属性

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

HTML

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

CSS

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("mdn-favicon16.png");
}

li {
  margin: 1em;
}

結果

要素の置き換え

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

HTML

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

CSS

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

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

結果

仕様書

Specification
CSS Generated Content Module Level 3
# content-property

ブラウザーの互換性

BCD tables only load in the browser

関連情報