html - 如何用侧面的线条简化此标题，使其不需要 css3 背景属性？

Question

我有一个 CSS 类，用于将标题居中，并在两侧添加垂直居中的线条。问题是，它使用 css3 背景属性，但并非每个浏览器都支持这些属性。所以我想简化它以实现跨浏览器兼容性，但我不确定该怎么做。

有没有更简单的方法来实现这一点，没有 css3 背景(并且没有添加任何额外的元素或静态高度/宽度)？

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

你可以使用fieldset和legend，代码不是很漂亮但是你不需要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>

---

或此其他方法白衣 :after 和 :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>