在某些文本html之前和之后需要一个虚线

Question

在我的网站上，我需要一些文字和虚线前后。类似的东西：

-------------------图像宽度（100px）----------------------- ---

有人可以帮我完成这个。我试过谷歌搜索，但我找不到任何东西。 边框中有完整的虚线/线条，但不是这样的。

Answer 1

设置一个容器并创建一个位于中间的<div>，边框为虚线。

请参阅DEMO。

<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;
}