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