css - 流動的な幅でテキストの周りにラインスルーを取得する

Question

私は今、しばらく問題に立ち往生しています。行が必要な h1 要素があります。このように: ----- テキスト -----

ページの背景は画像であるため、h1 要素に背景色を使用してテキストを非表示にすることはできません。

3列のテーブルで結果を得ることができましたが、それを機能させるには中央のセルの幅を設定する必要があります。

動的な幅で動作させることは可能ですか?

前もって感謝します。

Answer 1

css 疑似要素 :before および :after を使用して、テキストの両側に行を追加することを検討します。

このようなものはうまくいくかもしれませんが、いじる必要があります:

.textWithLine:before {
    display:block;
    content: "";
    float:left;
    width: 300px;
    height: 1px;
    background: #000;
    margin:5px;
}
.textWithLine:after {
    display:block;
    content: "";
    float:right;
    width: 300px;
    height: 1px;
    background: #000;
    margin: 5px;
}​

オーバーフローが非表示に設定されたコンテナでそれを使用し、テキストを中央に揃えると、動的に機能するようになりますが、完璧にするには遊びが必要です。

Answer 2

ご回答有難うございます。良いアイデアのように思えましたが、追加された 2 つのブロックを親ブロックの外に出す方法がわかりません。ここでの結果は、タイトルの下にプッシュされる :after ブロックです。

これが私のコードです:

<div class="titre_bloc2">

     <h1>Title</h1>

</div>


.titre_bloc2 
{
position:absolute;
height:30px;
text-align:center;
width:100%;
overflow:hidden;
}   
.titre_bloc2 h1
{
border:1px solid white;
text-align:center;
display:inline-block;
}
.titre_bloc2 h1:before
{
width:300px;
height:20px;
border:1px solid blue;
float:left;
display:block;
content: "test";
}
.titre_bloc2 h1:after
{
width:300px;
height:20px;
border:1px solid blue;
float:right;
display:block;
content: "test";
}

Answer 3

最後にjavascriptでそれをやった.私は通常、それを避けることができるときにそれを使うのは好きではない. jQueryによって検出されるクラスで通常のhnを使用しました。次に:-タイトルはdisplay:inline-blockに配置されます。このように、ブロックはコンテンツと同じ幅しかなく、後で幅を使用できません。- タイトルは align:center でブロックに戻されます - タイトルは新しい div でラップされます - タイトルの周りに配置される 2 つの新しい div を作成します。