How do I simplify this header with lines on the side, so that it doesn't need css3 background properties?

I have a css class for centering a heading, and adding vertically centered lines on either side. Problem is, it uses css3 background properties, and not every browser supports those. So I'd like to simplify this for cross browser compatibility, but am not sure how to do that.

Is there a simpler way to achieve this, without the css3 background (and without adding any extra elements or static heights/widths)?

demo here

.section-heading {
  display: table;
  white-space: nowrap;
}

.section-heading:before {
  background: linear-gradient(to bottom, black, black) no-repeat left center / 95% 1px;
  content: "";
  display: table-cell;
  width: 50%;
}

.section-heading:after {
  background: linear-gradient(to bottom, black, black) no-repeat right center / 95% 1px;
  content: "";
  display: table-cell;
  width: 50%;
}

<h2 class="section-heading">Example</h2>

There is my best try.

I have a little isue that I have corrected in Chrome; but I really don't know even why it works.

The CCS is

.test {
     display: table-row;
     white-space: nowrap;
     line-height: 0px;
}

.test:before,
.test:after {
     border-color: transparent;
     border-top: solid black 1px;
     border-left: solid transparent 1px;
     border-bottom: solid rgba(0,0,0,0.01) 11px;
     border-right: solid transparent 1px;
     content: "";
     display: table-cell;
     width: 50%;
}

.test:before {
     border-right: solid 30px transparent;
}
.test:after {
     border-left: solid 30px transparent;
}

I am using the border to display the black line, and to have it positioned in place I have reduced the height of the table to 0.

fiddle

In the fiddle, I have kept your original demo, so that you can compare side by side.

And now, the weird part. change rgba(0,0,0,0.01) in the border bottom to rgba(0,0,0,0.001), and it will break (at least in Chrome).

I really would like to understand that ...

new answer

All the above was asuming that the requirement was to have a transparent style (that is , that it was posible to set a background that could be seen thru the h1. If this is not the case, there is another posible solution, using box-shadow instead of gradient barckground:

.test {
  display: table-row;
  white-space: nowrap;
}

.test:before,
.test:after {
  border: solid white 10px;
  content: "";
  display: table-cell;
  width: 50%;
  height: 10px;
  line-height: 10px;
  box-shadow: inset 0px 5px white, inset 0px 6px black;
}

.test:before {
  border-right-width: 10px;
  border-left-width: 1px;
}
.test:after {
  border-left-width: 10px;
  border-right-width: 1px;
}

new demo