擬似要素 - wicky @ ウィキ

擬似要素

　擬似要素は、HTML文書のツリー構造における要素だけでは指定することができない、特定の行や文字に対してスタイルを適用させるために、用意されているセレクタです。擬似クラスと同様に、要素名と擬似要素をコロン「,」でつないで記述する。擬似クラスの概要を以下にまとめた。

■擬似要素

擬似要素	概要
:first-letter	ブロック要素の最初の1文字
:first-line	ブロック要素の最初の１行
:before	要素の直前
:after	要素の直後

　以下に、p要素内の最初の行にスタイルを適用させる際の例を示す。

●最初の行にスタイルを適用する例

p:first-line { font-size : 150% }

●HTMLの例

<h2>妖怪とは？</h2>
<p>
    このページでは、<em>妖怪</em>という不思議な存在（あるいは非存在）について考えてみたいと思います。<br>
    手っ取り早く妖怪について知りたい場合は、Wikipedia などをご覧になると良いかあもしれません。<br>
    柳田国男の<cite>妖怪談義</cite>によると、妖怪とは、<q>妖怪とは自然への畏怖の現れ</q>ということになります。
</p>

　Webブラウザでは、次のように表示される。:first-lineでは、br要素が強制改行されるまでの１行目あるいはブラウザに表示されている１行目だけにスタイルが適用される。したがって、ユーザによるウィンドウサイズの変更によって、表示が異なる点に注意が必要。

　:before および :after は、指定した要素の前後に文字や画像などを挿入するために設定することができる。

●アイコンを挿入する場合の例

p.note:before { content : url( note.png ) }

●文字列を挿入する場合の例

p.note:before { content : "Note: " }

　※:beforeおよび:afterで文字列や画像などを追加するためには、contentプロパティを使用する。