スポンサーリンク
| プロパティの値 | normal | none | [ <string> | <uri> | <counter> | attr(<identifier>) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit |
|---|---|
| 初期値 | normal |
| 対象要素 | ":before", ":after"擬似要素 |
| 継承 | 無効 |
| % | 無効 |
| メディア | all |
contentプロパティは、":before"及び":after"擬似要素で指定された箇所（要素の前後）に挿入するコンテンツ（文字列・連番・外部リソース）等を生成します。機能的にはquoteプロパティと同様にコンテンツの生成のみとなります。
内容を生成しません。（初期値）
内容を生成しません。
引用符で指定された文字列を生成します。引用符内の文字列には、エスケープ文字を使って引用符\"や改行\Aを記述することができます。
生成するコンテンツの内容に画像等の外部リソースを指定する場合に、その場所（アドレス）を指定します。外部リソースが取得出来ない場合は無視されます。
カウンタ識別子（変数）を用いて増減値に応じた連番や文字を自動的に生成することができます。
attrとはAttribute（属性）を示し、<identifier>の値にタグに付けられた属性名を指定することによって、その属性値をコンテンツとして生成します。
quotesプロパティで指定した引用符セットのうち、開始引用符を生成します。
quotesプロパティで指定した引用符セットのうち、終了引用符を生成します。
quotesプロパティで複数セット（階層）の開始および終了引用符を指定している場合に、挿入する引用符セットを１階層深くします。引用符は生成されません。
quotesプロパティで複数セット（階層）の開始および終了引用符を指定している場合に、挿入する引用符セットを１階層浅くします。引用符は生成されません。
擬似要素とは、もともとHTMLソース内に記述されていないコンテンツを擬似的に生成するための仕組みです。例えば、強調したい箇所を強調タグで囲むだけで自動的に括弧を挿入するといった使い方が可能です。尚、生成された擬似要素はインラインボックスとしての機能を持ち、widthやheightといったボックス領域の指定が可能です。
擬似要素を活用すれば、これまでHTMLソース中に一つ一つ記述していた章番号や括弧などの余計な記号を書く必要が無くなるため、HTMLソースがシンプルで見やすいものとなり、データの軽量化にも繋がります。
before及びafter擬似要素と組み合わせて使用した例
<p class="content-1">擬似要素の使い方</p> <p class="content-2">擬似要素の使い方</p> <p class="content-3">擬似要素の使い方</p> <p class="content-4">擬似要素の使い方</p>
p.content-1:before {content:"■ "}
p.content-1:after {content:" ■"}
p.content-2:before {content:url("img/icon.gif")}
p.content-3:before {content:counter(section)" 章 "}
p.content-4 {quotes:"『" "』"}
p.content-4:before {content:open-quote}
p.content-4:after {content:close-quote}
擬似要素の使い方
擬似要素の使い方
擬似要素の使い方
擬似要素の使い方