after擬似要素を使いたい

例えば、MTとかじゃなくて、普通のサイトでフッターのコピーライトの年表記を一括修正できるようにしたい時。今パッと思いつくのはこれくらい。(いや、年表記なんかいらないんだぜっていうのは無しで)

  1. フッター用のhtmlを別に作ってSSIでインクルードする
  2. フッター部に外部jsファイルのdocument.writeでコピーライトを書き出す
  3. Dreamweaverのライブラリを使う
  4. CSSのafter 擬似要素とcontentで書き出す
  5. 年が明けてからアップして一年間忘れてみる

1は、サーバがSSIに対応していない場合もある。2は、javascriptをoffにしている人もいる。3は、何となくイヤ(笑)。で、4な訳ですよ。

<div id="footer">
<p><span class="copyright">Copyrights&copy;</span> hoge Co., Ltd. All rights reserved.</p>
</div>

上記htmlに対して、下記のCSSで年を挿入する。

#footer .copyright:after {
        content: "2000-2004";
}
sample.jpg

年に変更が入る時は、CSS一カ所変更すれば全ページに反映される。これが一番簡単なんだけど、IEが対応していないorz いや、別にIEだけ表示されなくても無問題なんですが。

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

この記事についての情報

似た内容の記事

この記事に対するトラックバック

トラックバックURL: https://www.lucky-bag.com/mt/mt-tb.cgi/307

WWW hxxks - :before 擬似要素 / :after 擬似要素の活用例 (2004年11月27日 15:54)

hxxk.jp の場合は :before 擬似要素 / :after 擬似要素を随所に活用していますので、その例をいくつか紹介します。 続きを読む

Comments

strife said:

subaru's blog から飛んできました。
技術にお詳しく羨ましい限りです。

私はIT企業を志望します。
将来の希望は、技術者ではありませんが、
個人的に技術に興味はあります。

当サイトを参考にさせて頂きますね。
私のブログにもぜひいらしてください。
友人の話では、精神論中心らしいですが。。
参考にして頂ければ幸いです。

では、また遊びに来ます。

e-luck said:

strifeさん、こんにちは。
いやいや、実はそんなに詳しくもなかったりして(笑)
でも、やっぱり興味を持つってことが一番大事ですよね。技術や知識の習得具合も如実に反映する気がします。
当サイトが少しでもお役に立てれば嬉しい限りです:-)

strife said:

おはようございます。

返事を頂きありがとうございます。
そうそう、e-luckさん、相互リンクよろしいでしょうか?
ご検討の程、宜しくお願いします。

e-luck said:

>strifeさん
BlogPeopleですが、追加させて頂きました。MyblogListは使っていないのですが、pingは飛ばしているので、当サイトの更新は反映されるはずです。