WEB技術の辞書・解説・使用例

TOP > CSS >  CSS辞典 > content
content  引用符  マーク 

コンテンツの前後にマークや画像を挿入する。

このエントリーをはてなブックマークに追加

contentプロパティを適用することができるのは、:before擬似要素と:after擬似要素のみです。


要素の直前または直後に、文字列や画像などを挿入します。
また引用符を設定する場合はquotesプロパティもご覧ください。

:before疑似要素 と :after疑似要素

:before …「開始タグ」の直後。
:after …「終了タグ」の直前。

パラメーター

●文字列
 挿入する文字列を「"」または「'」で括って指定します。
●URI(URL)でファイルを指定
 URI(URL)で画像ファイルを指定
●open-quote
 quotesプロパティで指定されている開始引用符を挿入。
●close-quote
 quotesプロパティで指定されている終了引用符を挿入。

サンプルコード

p.test1:before { content: url("../img/arrow_circle2.gif")
p.test2:after { content: "★" }

<p class="test1">先頭に画像を挿入。</p>
<p class="test2">末尾に星マークを挿入。</p>

先頭に画像を挿入。

末尾に星マークを挿入。


SPANタグでのサンプル(表示させる)

●CSSの定義
.test3 span {quotes: "(" ")" "{" "}" "[" "]"; }
.test3 span:before {content: open-quote; }
.test3 span:after {content: close-quote; }

●HTML
<div class="test3">
<span>あいうえお<span>かきくけこ<span>さしすせそ</span></span></span>
</div>
あいうえおかきくけこさしすせそ