How do I simplify this header with lines on the si

Question

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%;
}

Answer 1

Please add Prefix for the CSS

For Webkit browswers

 -webkit-gradient 

Firefox

-moz-linear-gradient

IE

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');

More Details Here http://webdesignerwall.com/tutorials/cross-browser-css-gradient