Simple HTMLHTMLリファレンス

Main Menu

おすすめリンク

Site Info.

HTMLリファレンス

CSSリファレンス

その他の記事

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

スポンサーリンク

CSSリファレンス

擬似要素Pseudo-elementsTOPCSSSelectorPseudo-element

  1. E:first-letter:first-letter擬似要素
  2. E:first-line:first-line擬似要素
  3. E:after:after擬似要素
  4. E:before:before擬似要素

before 擬似要素The :before pseudo-element

書式CSSバージョン個別性W3C 仕様書
E:beforeCSS2.11CR
擬似要素について

before擬似要素は、指定した要素の先頭にコンテンツ(文字列や画像)を生成するためのセレクタです。HTMLソース中に記述されていないコンテンツをCSSによって作り出すため、擬似的に生成される要素(擬似要素)という扱いになっています。生成するコンテンツはcontent関連プロパティで指定します。

生成される擬似要素の配置について

before擬似要素によって生成されるコンテンツ部位のdisplayプロパティは、指定した要素がブロックレベル要素であるかインライン要素であるかによって指定できる値が変わります。

ブロックレベル要素の場合

display: none ( block / inline / inline-block / marker )

インラインレベル要素の場合

display: none ( inline / inline-block )

before疑似要素のサンプル

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}

擬似要素の使い方

擬似要素の使い方

擬似要素の使い方

擬似要素の使い方

コンテンツ関連プロパティ
  • content指定文字列や番号の生成
  • counter-incrementカウンタ(番号)の加算
  • counter-resetカウンタ(番号)のリセット
  • quotes生成する引用符の指定
スポンサーリンク
Copyright (C) 2010 Simple HTML. All Rights Reserved.