0

I have this code:

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

Code 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>

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

I tried to create this effect "----text----"

Currently my line cut text and do not want this.

In the footer of the site I tried to change and watch the show

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

What is wrong at my code?Can you help me please to solve this problem?

Thanks in advance!

Simona Diaconescu
  • 17
  • 4
  • possible duplicate of [Line separator under text and transparent background](http://stackoverflow.com/questions/23584120/line-separator-under-text-and-transparent-background) – Paulie_D Mar 08 '15 at 09:06
  • site is password protected.... but you need dashed as your for border-bottom rather than solid. – Maze Runner Mar 08 '15 at 09:54

2 Answers2

0

If i have got you question correct you want dashed line with text.

Fiddle

h2 { width:100%; 
    text-align:center; 
    border-bottom: 1px dashed #000; 
    line-height:0.1em; 
    margin:10px 0 20px; }
Ajay Narain Mathur
  • 5,326
  • 2
  • 20
  • 32
0

try using with border: dashed;

I have implemented the solutions , find below

[Dashed line example][1]

[1]: https://jsfiddle.net/pavank560/7jGHS/1302/
Pavan
  • 665
  • 5
  • 16