| 属性名 | 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-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>
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>