html - 中间有单词的水平线的CSS技术

Question

我正在尝试制作一条中间有一些文字的水平线。例如:

------------------------我的标题在这里--------- --------------------

有没有办法在 CSS 中做到这一点？显然没有所有的“-”破折号。

Answer 1

这大致是我的做法:通过在包含 h2 上设置 border-bottom 然后给出 h2 一个较小的 line-height。然后将文本放入具有非透明背景的嵌套 span 中。

h2 {
   width: 100%; 
   text-align: center; 
   border-bottom: 1px solid #000; 
   line-height: 0.1em;
   margin: 10px 0 20px; 
} 

h2 span { 
    background:#fff; 
    padding:0 10px; 
}

<h2><span>THIS IS A TEST</span></h2>
<p>this is some content other</p>

我只在 Chrome 中进行了测试，但没有理由它不应该在其他浏览器中运行。

JSFiddle: http://jsfiddle.net/7jGHS/