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

Question

我正在尝试在中间添加一些文本的水平尺。
例如：

-----------------------------------我的头衔------------ -----------------

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

Answer 1

这大致就是我的操作方式：通过在包含的border-bottom上设置h2然后给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/