CSS solution for pattern outside of text - html

Question

I am trying to style setup a section of a website with a pattern running to each side of certain pieces of text. You an see a screenshot that I took from the PSD file here --> http://screencast.com/t/84RCLRdSZT with red arrows pointing to the areas in question that I am finding difficult to solve.
Any idea how to go about this?
Here is what I am starting with:
<div class="box">
<h2>Some text here</h2>
</div>
and the css:
.box {
width:400px;
height:200px;
text-align:center;
background:yellow;
}
h2:after,h2:before{
content:"";
border:5px double purple;
}
here is the fiddle --> http://jsfiddle.net/HerrLoop/g63LB/1/
As you can see, the stripes are vertical, instead of horizontal as you can see in my initial screenshot.

Answer 1

This isn't quite perfect and requires you set a fixed width on the before/after elements (best I can think of is to use JavaScript if responsive is required), but here goes:
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/
Edit
This is a little bit more responsive, but still gets kind of cut off at small sizes and looks disproportional at others:
.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

Try the solution described here: http://kizu.ru/en/fun/legends-and-headings/
The quick 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; }