ちょっと素敵だったので備忘録。CSS
で見出しを水平線で囲むテクニック
です。本とかでよくある表現方法です
が、これを画像を使わず実装しよう、
というもの。クロスブラウザで動作
しますので汎用性もありますね。

これはいいですな・・・IE6でも7でも実装出来て、背景カラーや画像にも依存しません。

demo

こんな感じ。よく見かけますが、これをCSSのみで実装するTipsです。

CSS

  h1 {
    border-top: 1px solid black;
    margin:23px 0 0;
    text-align:center;
    padding:0; height:24px;
}

  h1 span {
    position: relative;
    top: -24px;
    padding: 0 20px;
    background:white;
}

borderを使って実装。h1にborderを付けて位置を下げ、spanで囲ってテキストだけ元の位置に戻す・・なるほど。僕がcss苦手だから思いつきませんでしたｗ

html

<h1><span>Kachibito</span></h1>

普通に書くだけ。

jQueryを使う

spanが含まれていないような既存サイトに導入したいのであればjQueryでspanを入れてあげればいいですね。

  $(document).ready(function() {
      var h = $('h1'),
          htext = $(h).text(),
          full = '<span>' + htext + '</span>';
      $(h).html(full);
    });

IE6


IE6でも7でも8でも問題なし。

続き書いたので宜しければ。

これは結構使うかも。他にもいろいろ試したくなりますねー。いいテクニックですね。
以下を参考にしました。

via:impressivewebs