属性名 | 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 |
CSS | IE/Edge | Firefox | Chrome | Opera | Safari |
---|---|---|---|---|---|
CSS2 | 8 | 1 | 1 | 4 | 1 |
疑似要素 ::before や ::after と共に用いて、要素の前方または後方に文字や画像などを挿入します。
値 | 説明 |
---|---|
<url> | 挿入したいコンテンツのURLを指定します。 |
normal | なにも挿入しません。 |
none | なにも挿入しません。 |
inhibit | 挿入を抑制します。(詳細不明) |
<string> | 指定した文字列を挿入します。 |
counter(...) | カウンタを挿入します。詳細は counter-increment を参照してください。 |
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>