CSS- Centering child text wider than parent container - html

Question

Here's a JSfiddle of what I have so far.
What I want to do is make it so that the text "Text With a Border" is centered inside of the parent div (I want to keep the double lined borders on either side of this text, so that the end result will be something like this: ==========Text With a Border==========. With the borders hanging off either side of the parent div.)
I would like to make it so that this solution works with containers of varying sizes with differing amounts of text.
I've found a few questions similar to this, about centering wide children inside of narrower parents, but for some reason I can't get them to work with this text.
CSS:
#container {
width:400px;
background:pink;
margin:0 auto;
padding: 10px 0;
}
.border {
display:block;
background:yellow;
}
.border span {
left:0;right:0;
white-space:nowrap;
margin: auto;
}
p.border span:after, p.border span:before {
content: " ";
display: inline-block;
width:100%;
height:5px;
border:solid gray;
border-width:1px 0;
}
HTML:
<div id="container">
<p class="border">
<span>Text With a Border</span>
</p>
</div>
Thanks for any help,

Answer 1

you could use negative margin and overflow.
Negative margin to virtually reduce width, space needed by pseudo-elements down to zero, :
http://jsfiddle.net/35waA/3/
#container {
width:400px;
background:pink;
margin:0 auto;
padding: 10px 0;
}
.border {
display:block;
background:yellow;
text-align:center;
overflow:hidden;
}
.border span {
white-space:nowrap;
margin: 0;
display:inline-block;
}
p.border span:after, p.border span:before {
content:" ";
display: inline-block;
width:200%;
height:5px;
border:solid gray;
border-width:1px 0;
}
p.border span:before {
margin-left:-200%;
}
p.border span:after {
margin-right:-200%;
}
Else , background-image /gradient will do too.