:before 擬似要素 / :after 擬似要素の活用例

:before 擬似要素 / :after 擬似要素の使用例

:before、:afterってcontentプロパティ使って要素の前後にイメージやら文字やらを挿入するのにスゲェ便利だと思うのになぁ、って今仕事しながら思った。

同感です。 というか、 hxxk.jp の場合は随所に活用しており、 CSS の便利さを存分に噛み締めています。

私は e-luck さん ( Lucky bag::blog ) のアイデアのようなフッタ部分の更新には使っていません ( 共通のフッタを使って PHP で include ) が、細かい所でよく使っています。 この機会にご紹介。

blockquote 要素で引用元の明示

blockquote{
  color:             #cccccc;
  background:        transparent url("../materials/hxxk002_bg02.png") left top repeat-y;
  border:            1px solid #cccccc;
  margin:            1em 2em 1em 3em;
  padding:           0 1em;
  }

blockquote[title]:before{
  display:           block;
  color:             #cccccc;
  background:        transparent;
  content:         ""attr(title)" より引用";
  border-bottom:     3px double #ccddff;
  margin-bottom:     0.5em;
  padding-top:       0.5em;
  padding-bottom:    0.5em;
  padding-left:      1em;
  font-size:         80%;
  font-weight:       bold;
  }

blockquote[cite]:after{
  display:           block;
  color:             #cccccc;
  background:        transparent;
  content:         "引用元 URI : "attr(cite)"";
  text-align:        right;
  border-top:        3px double #99bbff;
  margin-top:        0.5em;
  padding-top:       0.5em;
  padding-right:     2em;
  padding-bottom:    0.5em;
  font-size:         80%;
  font-weight:       bold;
  }

このように、 blockquote 要素に title 属性が指定されていれば、 :before 擬似要素でその内容 ( 主に引用元の title 要素 ) を記述し、また cite 属性が指定されていれば、 :after 擬似要素でその URI を記述するようにしています。 前項の引用部分を見て確かめてください。

属性セレクタを使用しているため、 title 属性や cite 属性が指定されていなければこのスタイルは反映されません。 すなわち、 CSS のために HTML の記述方法に制限をかけることはありません。 ( この場合で属性セレクタを使わないようにすると、 CSS との整合性を取るために title 属性と cite 属性を指定しなければならなくなるという本末転倒なことに……。 )

pre 要素でソースコードの説明

pre{
  color:             #99ffdd;
  background:        transparent url("../materials/hxxk002_bg02.png") left top repeat-y;
  border:            1px solid #cccccc;
  width:             90%;
  margin:            1em 1em 1em 3em;
  padding:           0.5em 1em;
  overflow:          auto;
  }

*>pre{
  width:             auto;
  margin:            1em 2em 1em 3em;
  }

pre[title]:before{
  display:           block;
  text-align:        right;
  color:             #cccccc;
  background:        transparent;
  content:         attr(title);
  border-bottom:     3px double #ccddff;
  margin-bottom:     0.5em;
  padding-top:       0.5em;
  padding-bottom:    0.5em;
  padding-left:      1em;
  font-size:         80%;
  font-weight:       bold;
  font-family:       "Trebuchet MS",sans-serif;
  }

pre em{
  color:             #ff0000;
  }

このように、 pre 要素に title 属性が指定されていれば、 :before 擬似要素でその内容を記述するようにしています。 私の場合は pre 要素を使う場合は、たいてい HTML や CSS のコードを書く時ですので、 title 属性はそのコードの説明になります。

これも属性セレクタを使用しているため、 title 属性が指定されていなければこのスタイルは反映されません。

del / ins 要素で削除 / 追記時間の明示

del{
  text-decoration:   line-through;
  color:             #666666;
  background:        transparent;
  }

del[datetime]:before{
  margin-left:       1em;
  content:         " ( "attr(datetime)" 削除 ) ";
  text-decoration:   none!important;
  color:             #cccccc!important;
  background:        transparent!important;
  }
  
ins{
  border-bottom:     1px dotted #666666;
  text-decoration:   none;
  }

ins[datetime]:before{
  margin-left:       1em;
  content:         " ( "attr(datetime)" 追記 ) ";
  text-decoration:   none!important;
  }

このように、 del / ins 要素に datetime 属性が指定されていれば、 :before 擬似要素でその内容を記述するようにしています。 datetime 属性は削除 / 追記の時間を表すため、いつ修正を行ったかを分かりやすくすることができます。 たとえば、「今日は 2004 年 11 月 26 日 2004 年 11 月 27 日 です。」といった風になります。

これも属性セレクタを使用しているため、 datetime 属性が指定されていなければこのスタイルは反映されません。

:before 擬似要素 / :after 擬似要素の対応状況

……と、自動的に補助情報を提供できる :before 擬似要素 / :after 擬似要素ですが、残念ながらブラウザごとに対応状況が違います。 現在私がインストールしているブラウザで確認したところ、以下のような結果になりました。

Mozilla Firefox 1.0

:before 擬似要素 / :after 擬似要素を表示することができますが、 content プロパティによって追加された内容をコピー & ペーストすることはできません。 あくまで CSS によって追加された内容であるので、本文ではないとして扱われているのかもしれませんが、個人的には不便だと思っています。

Opera 7.53

:before 擬似要素 / :after 擬似要素を表示することができ、 content プロパティによって追加された内容のコピー & ペーストも可能です。

Internet Explorer 6.0 SP1

:before 擬似要素 / :after 擬似要素に非対応のため、スタイルを完全に無視します。 :firest-letter :first-letter 擬似要素には対応しているのになあ……。

Mozilla Firefox と Opera に対応状況の差がありますが、どちらがより正しい挙動なのかは知りません。 ただ、引用元の URI をコピーしたい場合などがあるため、私は Opera の挙動の方が好きです。 Mozilla Firefox を使用している時は、 ContextMenu Extensions - コンテキストメニュー・メニューバーの追加機能の「引用元を表示」を使っているので不便すぎる、ということはありませんが……。

関連リソース

• :before 擬似要素 / :after 擬似要素の活用例 (2)
• Safari と content プロパティ

トラックバック送信先

• Lucky bag::blog: after擬似要素を使いたい