画像を使わずに見出しを水平線で挟むCSS小技

ちょっと素敵だったので備忘録。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);
  });