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

サポート (説明)

CSSIE/EdgeFirefoxChromeOperaSafari
CSS281141

説明

疑似要素 ::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進数で表記します。例えば、ハートマーク(&#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-2016 杜甫々
初版:1997年7月27日、最終更新:2016年5月8日
http://www.tohoho-web.com/css/prop/content.htm