どのようにCSSのヘッダの両側に実線を置くことができますか？

Question

可能性の重複：
How can I make a fieldset legend-style “background line” on heading text?

特定のページでは、私のクライアントは、私は、ヘッダーのいずれかの側の抜け線で小さなウィジェットをしたいと考えています。私はちょうどCSSでこれらの赤いヘッダーを作ることができる簡単な方法はありますか？

Answer 1

私の頭の上オフとテストされていない...あなたは、ヘッダ上の境界線の下に入れ、その後、テキストを含むヘッダー内<span>を持って、上の白の背景色を入れることができますあなたは、ヘッダーにtext-align: center;を設定し、それはそれでoverflow: hidden;を持っていないことを確認する必要があります：ボーダー

position: relative; 
bottom: -10px; 

編集の一部をカバーするためにいくつかのピクセルを、それをスパンし、下に移動！

Answer 2

ヘッダーの高さを持つ1ピクセル幅のイメージを作成し、イメージのすべてのピクセルを真中の1つの赤を除いて白にすることができます。その後、CSSを使用して、x軸上で繰り返される囲み要素の背景画像として設定することができます。画面全体に赤い線で表示されます。テキストをdivに囲み、その背景色を白に設定して、テキストがテキストの後ろに表示されないようにすることができます。