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>
あいうえおかきくけこさしすせそ