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()目次とページ番号の間に ...... などのリーダーを表示します。まだあまり実装されていません。

使用例

CSS
.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;
}
HTML
<div class="content-string">XXX</div>
<div class="content-unicode">XXX</div>
<div class="content-image">XXX</div>
表示
XXX
XXX
XXX

counter()

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

CSS
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) " ";    /* 章.節 を挿入 */
}
HTML
<h1>HTML</h1>
<h2>HTMLとは</h2>
<h1>CSS</h1>
<h2>CSSとは</h2>
表示
HTML
HTMLとは
CSS
CSSとは

counters()

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

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

Copyright (C) 1997-2022 杜甫々
初版:1997年7月27日、最終更新:2022年8月28日
http://www.tohoho-web.com/css/prop/content.htm