CSS - content CSS - content| 属性名 | content |
|---|---|
| 値 | [ <url> , ]* [ normal | none | inhibit | <content-list> ] |
| 値の詳細 | <content-list> = [ <string> | <url> | counter(...) | attr(...) | open-quote | close-quote | no-open-quote | no-close-quote ]* |
| 初期値 | normal |
| 適用可能要素 | すべての要素 |
| 継承 | 継承しない |
| メディア | Visual / Content |
| サポート | C2 / e8 / Fx1 / Ch1 / Op4 / Sa1 |
疑似要素 :before や :after と共に用いて、要素の前方または後方に文字や画像などを挿入します。
| 値 | 説明 |
|---|---|
| <url> | 挿入したいコンテンツのURLを指定します。 |
| normal | なにも挿入しません。 |
| none | なにも挿入しません。 |
| inhibit | 挿入を抑制します。(詳細不明) |
| <string> | 指定した文字列を挿入します。 |
| counter(...) | カウンタを挿入します。 |
| attr(...) | 属性値を挿入します。 |
| open-quote | 開き引用符を挿入します。 |
| close-quote | 閉じ引用符を挿入します。 |
| no-open-quote | 何も挿入しませんが、引用符の多重度が一段深くなります。 |
| no-close-quote | 何も挿入しませんが、引用符の多重度が一段浅くなります。 |
下記の例では、URL1 があれば、URL1 を、無ければ URL2 を、無ければ URL3 を、URL3 も無ければ "Hello" を挿入します。まだサポートブラウザは少ないようです。
.sample:before { content: url(URL1), url(URL2), url(URL3), "Hello."; }
下記の様に、カウンタと文字などを組み合わせることもできます。
.sample:before { content: counter(chapter) ". "; }
実体参照文字を表示するには、バックスラッシュ(\)＋6桁の 16進数で表記します。例えば、ハートマーク(♥) は、\002665 で現します。
.sample:before { content: "\002665"; }
.sample-text:before {
content: "★ ";
}
.sample-heart:before {
content: "\002665" " ";
color: red;
}
.sample-image:before {
content: url(../image/mark.gif);
margin-right: 3px;
}
.sample-attr:after {
content: "[" attr(title) "]";
font: bold x-small;
color: red;
}
.sample-quote:before {
content: open-quote;
color: red;
}
.sample-quote:after {
content: close-quote;
color: red;
}
.sample-no-quote:before {
content: no-open-quote;
}
.sample-no-quote:after {
content: no-close-quote;
}
.sample-counter:before {
content: counter(capter) ". ";
color: red;
}
.sample-new:after {
content: "New!";
color: red;
font-size: x-small;
vertical-align: text-top;
font-weight: bold;
margin-left: 3px;
}
a.sample-hover-link[href^="http:"]:hover:after {
content: " (" attr(href) ")";
}
@media print {
a.sample-print-link:after {
content: " (" attr(href) ")";
font-size: x-small;
}
}
<div class="sample-text">テキストを表示します。</div> <div class="sample-heart">ハートマークを表示します。</div> <div class="sample-image">画像を表示します</div> <div class="sample-attr" title="xyz">属性値を表示します</div> <div class="sample-quote">引用符を表示します</div> <div class="sample-quote">二重の<span class="sample-quote">引用符</span>を表示します</div> <div class="sample-no-quote">二重の<span class="sample-quote">引用符</span>を表示します</div> <div class="sample-counter">カウンタを表示します</div> <div class="sample-new">新着コンテンツです</div> <div>マウスを乗せるとURLを表示します：<a class="sample-hover-link" href="http://www.yahoo.co.jp/">Yahoo!</a></div> <div>印刷時のみURLが印刷されます：<a class="sample-print-link" href="http://www.yahoo.co.jp/">Yahoo!</a></div>