html - テキスト HTML の前後に破線が必要

Question

私のウェブサイトでは、前後にテキストと破線が必要です。何かのようなもの：

-------------------画像幅(100px)--------------------------

誰かがこれを達成するのを手伝ってくれますか? グーグルを試しましたが、何も見つかりませんでした。境界線には完全な破線/線がありますが、このようなものはありません。

Answer 1

コンテナを設定し<div>、中央に破線の境界線を持つ を作成します。

デモを参照してください。

<div class='container'>
    <img src='http://dummyimage.com/100/000/fff' />  
    <div class='line'></div>
</div>

.container {
    position: relative;
    text-align: center;
}

.line {
    border-top: 1px dashed #000;
    width: 100%;
    position: absolute;
    top: 50%;
    z-index: -2;
}

テキストについても同様に、背景とパディングを指定すれば準備完了です。

<div class='container'>
    <span class='text'>some text</span>
    <div class='line'></div>
</div>

.text {
    background-color: #FFF;
    padding: 0 3px;
}