How do I get this CSS to work in safari - css

Question

I am currently testing some CSS in different web browsers. This all works great except in Safari 5.1.7. I am testing this fiddle . Does anyone know how I can fix this, because I would like to use it in a website.
The css is supposed to display a heading with a colored line either side.
Here is the code:
[HTML]
<h1>This is my Title</h1>
<h1>Another Similar Title</h1>
<div class="color"><h1>Just Title</h1></div>
[CSS]
h1 {
position: relative;
font-size: 30px;
z-index: 1;
overflow: hidden;
text-align: center;
}
h1:before, h1:after {
position: absolute;
top: 51%;
overflow: hidden;
width: 50%;
height: 1px;
content: '\a0';
background-color: red;
}
h1:before {
margin-left: -50%;
text-align: right;
}
.color {
background-color: #ccc;
}

Answer 1

Better use one element inside h1 and use :before and :after with left and right properties. This will work in most of the browsers including Safari.
h1 {
overflow: hidden;
font-size: 30px;
text-align: center;
}
h1 span {
display: inline-block;
vertical-align: top;
position: relative;
padding: 0 5px;
}
h1 span:before, h1 span:after {
background-color: red;
position: absolute;
margin-top: -1px;
width: 9999px;
top: 50%;
height: 1px;
content: '\a0';
left: 100%;
}
h1 span:before {
left: auto;
right: 100%;
}
.color {
background-color: #ccc;
}
<h1><span>This is my Title</span></h1>
<h1><span>Another Similar Title</span></h1>
<div class="color">
<h1><span>Just Title</span></h1>
</div>