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進数で表記します。例えば、ハートマーク(&#9829;) は、\002665 で現します。

.sample:before { content: "\002665"; }

使用例

CSS
.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;
    }
}
HTML
<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>
表示
テキストを表示します。
ハートマークを表示します。
画像を表示します
属性値を表示します
引用符を表示します
二重の引用符を表示します
二重の引用符を表示します
カウンタを表示します
新着コンテンツです
マウスを乗せるとURLを表示します:Yahoo!
印刷時のみURLが印刷されます:Yahoo!

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