CSS content

contentとは、指定した条件に一致する部分の前後に文字列や画像を挿入するCSSプロパティで、:beforまたは:after偽要素と共に使われます。contentの使い方をご紹介します。

書式

content: normal | none | [string | uri | counter | open-quote | close-quote ]+ | inherit

contentプロパティの値には、次のうちいずれかを指定する。

none

偽要素は生成しない

normal

none（初期値）

string

文字列

uri

外部リソースのURIを url( uri ) の形式で指定する。

counter

カウンタ

open-quote

引用符（開き）

close-quote

引用符（閉じ）

使用例と表示サンプル

<style>
  #samp1:before {
    content: "inserted content ";
  }
</style>
<p id="samp1">sample</p>

sample

<style>
  #samp2:after {
    content: " inserted content";
  }
</style>
<p id="samp2">sample</p>

sample

<style>
  #samp3:before {
    content: open-quote;
  }
  #samp3:after {
    content: close-quote;
  }
</style>
<p id="samp3">sample</p>

sample

Unicode

content CSSプロパティでUnicodeを扱うには、円記号（バックスラッシュ）に続けて、頭の0を除いたUnicodeを指定する。

たとえば、段落記号（U+00B6）を頭に付けるには、CSSを次のようにしていする。

<style>
  .pilcrow:before {
    content: "\B6";
  }
</style>
<p class="pilcrow">
  ある朝、目を覚ました時、これはもうぐずぐずしてられない、と思ってしまったのだ。
</p>

ある朝、目を覚ました時、これはもうぐずぐずしてられない、と思ってしまったのだ。

特殊文字

content CSSプロパティでは実体参照を使えない。content CSSプロパティで特殊文字を挿入するには、Unicodeで指定する。

画像

content CSSプロパティで画像を挿入するには、画像のURIを指定する。

<style>
  .marker:before {
    content: url(https://segakuin.com/css/img/marker.gif);
  }
</style>
<p class="marker">
  私はインドのデリーにいて、これから南下してゴアに行こうか、北上してカシミールに向かおうか迷っていた。
</p>

私はインドのデリーにいて、これから南下してゴアに行こうか、北上してカシミールに向かおうか迷っていた。

改行

content CSSプロパティでタグは使用できないため、<br> を挿入できない。content CSSプロパティで改行させるには、"\A" を挿入したうえで、white-space:pre; を指定する。

:before {
  content: "\A";
  white-space: pre;
}

連番

content CSSプロパティで連番を振るには、counter 関数を使う。

<style>
  body {
    counter-reset: chapter
  }
  h4:before {
    content: "第" counter(chapter) "章 ";
    counter-increment: chapter;
  }
  h4 {
    counter-reset: section;
  }
  h5:before {
    content: counter(chapter) "." counter(section) " ";
    counter-increment: section;
  }
</style>
<h4>香港・マカオ</h4>
<h5>朝の光</h5>
<h5>黄金宮殿</h5>
<h4>マレー半島・シンガポール</h4>
<h5>メナムから</h5>

香港・マカオ

朝の光

黄金宮殿

マレー半島・シンガポール

メナムから

counter-reset

カウンターの値をリセットする。

counter-reset: counter [integer]

counter

カウンターの名前を指定する。リセット値の指定を省略した場合は、0 でリセットされる。

h1 {
  counter-reset: chapter
}

integer

カウンターをリセットする値を指定する。

h1 {
  counter-reset: chapter -1
}

counter-increment

カウンターの値を増やす。

counter-increment: counter [integer]

counter

カウンターの名前を指定する。増分値の指定を省略した場合は、1 増える。

h1 {
  counter-increment: chapter
}

integer

カウンターを増やす値を指定する。

h1 {
  counter-increment: chapter 10
}

counter-set

カウンターに値を設定する。

counter-set: counter [integer]

counter

カウンターの名前を指定する。設定値の指定を省略した場合は、0 に設定される。

h1 {
  counter-set: chapter
}

integer

カウンターの設定値を指定する。

h1 {
  counter-set: chapter 10
}

CSSプロパティ

CSSには次のプロパティがある。

参考文献

World Wide Web Consortium 2023. CSS Generated Content Module Level 3

Web Hypertext Application Technology Working Group (2022) "Named character references" HTML Living Standard