此代码有什么问题？HTML / CSS

Question

我有以下代码：

http://jsfiddle.net/7jGHS/1299/

代码HTML：

    <div class="text1"><h2><span>THIS IS A TEST</span></h2>
    <p>1800 - 1570 - 000</p>
    <h2><span>THIS IS A TEST</span></h2>
</div>
<div class="text2"><h2><span>THIS IS A TEST</span></h2>

    <p>1800 - 1570 - 000</p>

    <h2><span>THIS IS A TEST</span></h2>
</div>

代码CSS：

h2 { width:100%; text-align:center; border-bottom: 1px solid #000; line-height:0.1em; margin:10px 0 20px; } 
h2 span {  padding:0 10px; }
.text1{float:left;display:inline-block;width:50%;}
.text2{float:left;display:inline-block;width:50%;}

我试图创建这种效果“ ---- text ----”

目前，我的行被剪切文本，并且不希望这样做。

在网站的页脚中，我试图更改并观看节目

http://www.les-toiles.co/

我的代码有什么问题？您能帮我解决这个问题吗？

提前致谢！

Answer 1

如果我让您提出正确的问题，则需要带有文本的虚线。

小提琴

h2 { width:100%; 
    text-align:center; 
    border-bottom: 1px dashed #000; 
    line-height:0.1em; 
    margin:10px 0 20px; } 

Answer 2

尝试使用border： 虚线 ;

我已经实施了解决方案，请在下面找到

[虚线示例] [1]

[1]: https://jsfiddle.net/pavank560/7jGHS/1302/