contentの解説|クロノドライブのCSS辞典

content

対応ブラウザ Internet Explorer 8~ / Firefox 1~ / Google Chrome 1~ / Safari 1~ / Opera 4~
初期値 normal 継承 しない
適用可能な要素 beforeとafter擬似要素
用例
.style:after {
  content: "content要素が入ります";
}
.style:before {
  content: url("../img/icon.png");
}

contentとは

contentとは要素の前後に文字や画像などを挿入するプロパティです。
以下の値で指定します。

none
何も挿入されません。
normal(初期値)
何も挿入されません。
"文字列"
挿入したい文字列を指定をします。(文字列は引用符で囲む)
url(URI)
挿入したいコンテンツのURLを指定します。
attr(属性名)
挿入したい属性を指定します。
counter()
counters()
通し番号の挿入の仕方を指定します。
open-quote
開始引用符の挿入を指定します。
close-quote
終了引用符の挿入を指定します。
no-open-quote
開始引用符を挿入したことにして、引用符の入れ子の深さを一段階深くします。引用符は挿入されません。
no-close-quote
開始引用符を挿入したことにして、引用符の入れ子の深さを一段階浅くします。引用符は挿入されません。

擬似要素のbefore、afterとともに使用します。それ以外の要素への指定では何も挿入されません。