文字列や画像などを挿入する際に使うcontentプロパティ
content

　contentプロパティは、:before疑似要素および:after疑似要素が適用された要素の直前・直後に、文字列や画像といったコンテンツを挿入する場合に使います。

基本データ

構文 セレクタ{content: プロパティの値;}
継承 ×
値
normal、none
　
任意の文字列
挿入したい文字列を「"」または「'」で括って指定
url()関数
URIを指定
counter()関数、counters()関数
指定した名前のカウンタの値が変化する（counter-resetプロパティとcounter-incrementプロパティを参照）
attr()関数
該当する要素の属性の名前を指定。その属性で指定している文字を挿入できる
open-quote、close-quote
quotesプロパティで指定した引用符を挿入。open-quoteは開始引用符、close-quoteは終了引用符
no-open-quote、no-close-quote
引用レベルを設定する値で、それ自身では引用符を追加しない
親から値を継承させる場合
inherit
効果 要素の直前・直後に、文字列や画像といったコンテンツを挿入
初期値 空文字
適用個所 :before疑似要素か:after疑似要素が適用された要素

例：

hogehogeのclass

寄りのrightのclass

eyecatchのclass

p.hogehoge:before {
content: "例：";
display: inline;
}
p.right:before {
content: attr(align);
display: inline;
}
p.eyecatch:after {
content: url("../images/arrow.gif") ;
}

<p class="hogehoge">hogehogeのclass</p>
<p class="right" align="right">寄りのrightのclass</p>
<p class="eyecatch">eyecatchのclass</p>

動作Webブラウザ

Internet Explorer ＩＥ 8以上
Firefox Firefox 3以上
Safari Safari 1.3以上は部分実装
Opera Opera 9.2以上は部分実装
Chrome Chrome 2以上は部分実装
iPhone/iPad 全バージョン

標準JavaScriptによるDOMでの参照方法

[window.]document.getElementById("ID属性値").style.content

jQueryを使った参照方法

$('【セレクタ】').css('content','【値】');
$('【セレクタ】').css({'content':'【値】'});

CSSリファレンス インデックス

有限会社タグパンダ
喜安 亮介




HTML5 + UX フォーラム 新着記事
＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

注目のテーマ

デザインハック 記事ランキング

本日 月間
＠IT