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

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

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

Answer 1

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

Answer 2

You can use fieldset and legend, it's not very beautiful code but you don't need CSS3

http://jsfiddle.net/dASCv/9/

fieldset {
  text-align: center;
  border: none;
  border-top: 1px solid black;
}

legend {
  padding: 20px;
}

<fieldset>
  <legend>
    <h2>Example</h2>
  </legend>
</fieldset>

---

OR this other method whit :after and :before

http://jsfiddle.net/dASCv/10/

div {
  text-align: center;
}

h2:before,
h2:after {
  border-top: 1px solid black;
  display: block;
  height: 1px;
  content: " ";
  width: 40%;
  position: absolute;
  left: 0;
  top: 1.4em;
}

h2:after {
  right: 0;
  left: auto;
}

<div>
  <h2>text TEXT</h2>
</div>

Answer 3

1-element solution

FIDDLE

div {
  display: inline-block;
  background: #fff;
  padding: 0 10px;
}

div:before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 20px;
  border-bottom: 1px solid #c2c2c2;
  margin-top: -9px;
  z-index: -1;
}

<div>A header</div>

(NB: for this solution to work, you need to set text-align:center on its parent element)

---

2-element solution (works over a background image)

FIDDLE

.splitHR {
  text-align: center;
  overflow: hidden;
}

.splitHRText {
  display: inline-block;
  position: relative;
  padding: 0 10px;
}

.splitHRText:before,
.splitHRText:after {
  content: '';
  display: block;
  width: 1000px;
  position: absolute;
  top: 0.73em;
  border-top: 1px solid #c2c2c2;
}

.splitHRText:before {
  right: 100%;
}

.splitHRText:after {
  left: 100%;
}

<div class="splitHR">
  <span class="splitHRText">A header</span>
</div>

Answer 4

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

Answer 5

Using this way also you can achieve the answer, please check this

<p style="display:block; width:100%; text-align:center; 
border-bottom:1px #ccc solid; line-height:3px">
 <span style="background-color:red; ">Examples</span></p>

http://jsfiddle.net/dASCv/11/

Answer 6

css

h2 {
    border-bottom: 1px solid black;
    text-align: center;
    margin: 0;
    padding: 0;
}

h2 span {
    display: inline-block;
    position: relative;
    padding: 0 20px;
    bottom: -15px;
    background-color: white;
}

markup

<h2><span>text Textsssssssssssssssss</span></h2>

You could set the bottom for span in percentage if you set the height for h2.

Answer 7

you can use this code:

JsFiddle DEMO

HTML:

<h2><span>Title is here</span></h2>

CSS:

h2{
    display:block;
    text-align:center;
    line-height:30px;
}
h2 span{
    background:#fff;
    padding:0 10px;
}
h2:after{
    content:"";
    display:block;
    border-top:1px solid black;
    margin-top:-15px;
}

---

Update:

you can use this code too: (single element)

JsFiddle

HTML:

<h2>Title is here</h2>

CSS:

h2{
display: table;
margin: 0 auto;
text-align: center;
line-height: 30px;
padding: 0 10px;
background: #FFF;
}
h2:after{
   content:"";
    display:block;
    border-top:1px solid;
    margin-top:-15px;
    position:absolute;
    width:100%;
    left:0;
    z-index:-1;
}