Решение CSS для шаблона за пределами текста

Question

Я пытаюсь настроить стиль раздела веб-сайта с рисунком, работающим с каждой стороны определенных фрагментов текста. Вы видите скриншот, который я взял из файла PSD здесь ->http://screencast.com/t/84RCLRdSZT с красными стрелками, указывающими на те области, о которых я затрудняюсь решить.

Любая идея, как это сделать?

Вот что я начинаю с:

<div class="box"> 
    <h2>Some text here</h2> 
</div> 

и CSS:

.box { 
    width:400px; 
    height:200px; 
    text-align:center; 
    background:yellow; 
} 

h2:after,h2:before{ 
    content:""; 
    border:5px double purple; 
} 

здесь скрипку ->http://jsfiddle.net/HerrLoop/g63LB/1/

Как вы можете видеть, полосы вертикальный, а не горизонтальный, как вы можете видеть на моем первом снимке экрана.

Answer 1

Это не совсем совершенна и требует установить фиксированную ширину на перед/после элементов (лучшее, что я могу думать о том, чтобы использовать JavaScript, если отзывчивым требуется), но здесь идет:

h2{ 
    display:inline-block; 
    vertical-align:middle; 
} 
h2:after, 
h2:before{ 
    content:""; 
    margin:0px 20px; 
    border:1px solid #000; 
    border-left: 0px; 
    border-right:0px; 
    height:5px; 
    width:50px; 
    display:inline-block; 
    vertical-align:middle; 
} 

http://jsfiddle.net/daCrosby/g63LB/2/

Редактировать

Это немного более отзывчивыми, но по-прежнему получает вид отрезаны при малых размерах и выглядит дис пропорциональные у других:

.box { 
    width:50%; 
    overflow:hidden; 
} 
h2{ 
    display:inline-block; 
    vertical-align:middle; 
    width:100%; 
    white-space:nowrap; 
} 
h2:after, 
h2:before{ 
    content:""; 
    margin:0px 20px; 
    border:1px solid #000; 
    border-left: 0px; 
    border-right:0px; 
    height:5px; 
    width:20%; 
    display:inline-block; 
    vertical-align:middle; 
} 

http://jsfiddle.net/daCrosby/g63LB/3/

Answer 2

Постарайся решение, описанное здесь: http://kizu.ru/en/fun/legends-and-headings/

Быстрый demo:

h2{ 
    overflow-x: hidden; 
    white-space: nowrap; 
    text-align: center; 
} 
h2:before, h2:after { 
    content: ""; 
    border: solid #000; 
    border-width: 1px 0; 
    height: 5px; 
    width: 50%; 
    display: inline-block; 
    vertical-align: middle; 
} 
h2:before { margin: 0 .5em 0 -50%; } 
h2:after { margin: 0 -50% 0 .5em; }