中央のテキストの両側に水平線を描くためのCSS

<div class="header">
    <span class="line"></span>
    <span class="text">中央にテキスト、両側に水平線</span>
    <span class="line"></span>
</div>

<スタイル>
。ヘッダ
{
    幅:400ピクセル;
    高さ:36px;
    行の高さ:36px;
    border:1px 緑一色;
    テキスト配置:中央;
}
。ライン
{
    表示:インラインブロック;
    幅:100ピクセル;
    上境界線:1px 実線 #cccccc;
    垂直方向の位置合わせ:5px;  
  // オンラインで、.text が vertical-align:-5px に設定されていることを知りました。試してみたところ、.header に設定されている line-height と競合しているようで、効果が正しくありません。そこで、vertical-alignを.lineに設定します}
</スタイル> 

<div class="header">
    <div>中央にテキスト、両側に水平線</div>
</div>

<スタイル>
    。ヘッダ
    {
        幅:400ピクセル;
        高さ:36px;
        行の高さ: 36px;
        テキスト配置:中央;
        border:1px 緑一色;
        位置:相対;
    }
    .header div:before、.header div:after
    {
        位置:絶対;
        背景:#ccc;
        コンテンツ："";
        高さ:1px;
        上位:50%;
        幅:100ピクセル;
    }
    .header div:before{left:10px;}
    .header div:after{right:10px;}
</スタイル>