CSS - content

• トップ
• CSSリファレンス
• content

概要

属性名	content
値	normal | none | [ <image> | <content-list> ] [/ [ <string> | <counter> ]+ ]?
値の詳細	<content-list> = [ <string> | contents | <image> | <counter> | <quote> | <target> | leader() ]+ <counter> = counter() | counters() <quote> = open-quote | close-quote | no-open-quote | no-close-quote <target> = target-counter() | target-counters() | target-text()
初期値	normal
適用可能要素	すべての要素
継承	継承しない
メディア	visual
サポート	https://caniuse.com/?search=content

説明

疑似要素 ::before や ::after と共に用いて、要素の前方または後方に文字、画像、カウンターなどを挿入します。

値	説明
normal	なにも挿入しません。
none	なにも挿入しません。
<image>	イメージを挿入します。
<string>	文字を挿入します。
contents	(未稿)
counter()	カウンターを挿入します。
counters()	入れ子カウンターを挿入します。
open-quote	開き引用符を挿入します。
close-quote	閉じ引用符を挿入します。
no-open-quote	何も挿入しませんが、引用符の多重度が一段深くなります。
no-close-quote	何も挿入しませんが、引用符の多重度が一段浅くなります。
target-counter()	<a href="..."> 参照先のページ番号などを挿入します。まだあまり実装されていません。
target-counters()	同上
target-text()	<a href="..."> 参照先のテキストを挿入します。まだあまり実装されていません。
leader()	目次とページ番号の間に ...... などのリーダーを表示します。まだあまり実装されていません。

使用例

.content-string::before {
  content: "[string] ";
  color: red;
}
.content-unicode::before {
  content: "\002665";
  color: red;
  margin-right: 4px;
}
.content-image::before {
  content: url(image/sample.gif);
  margin-right: .2rem;
}

<div class="content-string">XXX</div>
<div class="content-unicode">XXX</div>
<div class="content-image">XXX</div>

詳細

counter()

counter-reset や counter-increment と組み合わせてカウンターを挿入します。chapter や section はカウンター名で任意の文字列を使用できます。

body {
  counter-reset: chapter;             /* 章カウンタをリセット */
}
h1 {
  counter-increment: chapter;         /* 章カウンタをインクリメント */
  counter-reset: section;             /* 節カウンタをリセット */
}
h1:before {
  content: counter(chapter) ". ";    /* 章. を挿入 */
}
h2 {
  counter-increment: section;        /* 節カウンタをインクリメント */
}
h2::before {
  content: counter(chapter) "." counter(section) " ";    /* 章.節 を挿入 */
}

<h1>HTML</h1>
<h2>HTMLとは</h2>
<h1>CSS</h1>
<h2>CSSとは</h2>

counters()

counter-reset や counter-increment と組み合わせてカウンターを挿入します。<ol> や <ul> と組み合わせて入れ子カウンターを表示することができます。cnt はカウンター名で任意の文字列を使用できます。

ol {
  counter-reset: cnt;                 /* 入れ子カウンターをリセット */
  list-style: none;
  padding-left: .5rem;
}
li::before {
  content: counters(cnt, ".") ") ";   /* 入れ子カウンターを表示 */
  counter-increment: cnt;             /* 入れ子カウンターをインクリメント */
}

<ol>
<li>XXX
  <ol>
  <li>XXX
    <ol>
    <li>XXX
    </ol>
  </ol>
<li>XXX
  <ol>
  <li>XXX
  </ol>
</ol>

代替テキスト

/ の後ろには読み上げブラウザなどが読み上げる代替テキストを指定します。Chrome 140 では代替コンテンツでも counter() や counters() がサポートされました。

.my-example::before {
  content: url(image/xxx.png) / "代替テキスト";
}

リンク

• https://developer.mozilla.org/ja/docs/Web/CSS/content
• https://drafts.csswg.org/css-content/#content-property

---