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