expression() :after

:after疑似要素 とcontentプロパティをexpression()で再現。<blockquote>title,citeを引用文に付け足す。

CSS2

人はなぜ生きるのか?”については、極たまーに(嫌なことがあった時などに)考えたりするわけだが、今まで「これ」といった解答には至っていない。たぶん似た問いの”何のために生きるのか?”や”人生の目的は?”などに答えられる人なら、あるいは解っているのかもしれない。

  1. blockquote.css2:after {
  2. content : attr(title) " - " attr(cite);
  3. display : block;
  4. color: #c00;
  5. font-size: .9em;
  6. font-style: italic;
  7. text-align: right;
  8. margin: 0;
  9. padding-bottom: 2px;
  10. }

expression (IE6用)

人はなぜ生きるのか?”については、極たまーに(嫌なことがあった時などに)考えたりするわけだが、今まで「これ」といった解答には至っていない。たぶん似た問いの”何のために生きるのか?”や”人生の目的は?”などに答えられる人なら、あるいは解っているのかもしれない。

  1. blockquote.exp.after {
  2. behavior: expression(
  3. this.innerHTML += '<div style="color: #c00; font-size: .9em; font-style: italic; text-align: right; margin: 0; padding-bottom: 2px;">' +this.title + ' - ' +this.cite +'<\/div>',
  4. this.className += " expoff" );
  5. }
  6. blockquote.expoff {
  7. behavior: none;
  8. }

title,cite属性を読み出し、innerHTMLを上書きする。(一度だけ)書き換え終了後に自らのclassNameに新しい名前を与え、そのクラスで以後のイベントに反応しないようにする。

クロスブラウザにする場合は両classNameを共通のものにすればOK

目的通りの結果ですが、このやり方が正しいのか自信なし。実装は自己責任でお願いします。

作成日 2005-12-01

©2004-2005 FC2