html - テキストの真ん中に行

Question

テキストの途中に線を作成する方法は、div の全長を占める必要がありますか? このように、かっこは div の開始と終了を示します。

[Text ------------------ Text]

Answer 1

疑似要素を使用して、それを参照してくださいWorking Fiddle

HTML:

<div><span>Left</span><span class="right">Right</span></div>

CSS:

span
{
    background-color: white;
}
.right
{
    float: right;
}

div
{
    position: relative;
}
div:before
{
    content: '';
    display: block;
    width: 100%;
    border-top: 1px solid black;
    position: absolute;
    bottom: 50%;
    z-index: -1;
}

あなたはより良い結果padding: 0 15px;のspanために適用することができます..

Answer 2

これは機能しますか？

div { width: 80%; }
hr { position: relative; top: 0.4em; }
span.left { float: left; padding-right: 0.5em; }
span.right { float: right; padding-left: 0.5em; }

<div>
    <span class="left">Text</span>
    <span class="right">Text</span>
    <hr/>
</div>