我认为最直接的方法是使用CSS网格。

h1 { 显示:网格; Grid-template-columns: 1fr auto 1fr; 差距:1快速眼动; ｝ h1::, {后h1:: 内容:“”; 顶部边缘:0.1雷姆重黑; align-self:中心; ｝ <标题>标题< h2 >

使用Flexbox的简单方法

# title-wrapper { 显示:flex; 对齐项目:中心; ｝ .title { flex-wrap:包装; Margin: 0 10px 0 10px; text-align:中心; ｝ .line { flex: 1; 身高:1 px; 背景颜色:黑色; ｝ <节id =“title-wrapper”> < div class = '行' > < / div > <div class='title'>some text</div> < div class = '行' > < / div > < / >节

.hr-sect { 显示:flex; flex-basis: 100%; 对齐项目:中心; 颜色:rgba(0,0,0,0.35); Margin: 8px 0px; ｝ .hr-sect::, {后.hr-sect:: 内容:“”; flex-grow: 1; 背景:rgba(0,0,0,0.35); 身高:1 px; 字体大小:0 px; 行高:0 px; Margin: 0px 8px; ｝ < div class = " hr-sect " > < / div >文本

CSS网格是救星

类似于上面的flex答案，这也可以使用CSS网格来完成。这为您提供了更大的范围来偏移标题，以及一种更简单的方式来扩大行(使用网格-模板-列)和内容(使用网格-间隙)之间的间隙。

与flex方法相比，该方法的优点是易于偏移行，并且只需要在列之间添加一次间隙(而不是两次，对于每个:before和:after伪元素)。在我看来，它在语法上也更清晰和明显。

h1 { 显示:网格; Grid-template-columns: 1fr auto 1fr; 对齐项目:中心; grid-gap: 1快速眼动; ｝ h1:之前, h1:{后 内容:“”; 显示:块; border-top: 2px solid currentColor; ｝ h1。抵消{ Grid-template-columns: 1fr auto 3fr; ｝ h1。biggap { grid-gap: 4快速眼动; ｝ <h1>这是一个标题</h1> <h1 class="offset"> offset title</h1> <h1 class="biggap">Gappy title</h1> <标题> < span >多行标题< br / > < / span > < / h1 >

IE8及更新版本的解决方案…

值得注意的问题:

使用背景颜色来掩盖边框可能不是最好的解决方案。如果你有一个复杂的(或未知的)背景颜色(或图像)，掩蔽最终将失败。此外，如果你调整文本大小，你会注意到白色背景色(或任何你设置的颜色)会开始覆盖上面(或下面)的文本。

您也不希望“猜测”各个部分的宽度，因为这会使样式非常不灵活，几乎不可能在内容宽度不断变化的响应式站点上实现。

解决方案:

(View JSFiddle)

使用display属性，而不是用背景色“掩蔽”边框。

HTML

<div class="group">
    <div class="item line"></div>
    <div class="item text">This is a test</div>
    <div class="item line"></div>
</div>

CSS

.group { display: table; width: 100%; }
.item { display: table-cell; }
.text { white-space: nowrap; width: 1%; padding: 0 10px; }
.line { border-bottom: 1px solid #000; position: relative; top: -.5em; }

通过在.group元素上放置font-size属性来调整文本大小。

限制:

没有多行文本。只能单行。 HTML标记不那么优雅 line元素上的Top属性需要是行高的一半。所以，如果行高是1.5em，那么顶部应该是- 0.75 em。这是一个限制，因为它不是自动的，如果您在具有不同行高的元素上应用这些样式，那么您可能需要重新应用您的行高样式。

对我来说，这些限制超过了我在回答大多数实现时开头提到的“问题”。

在尝试了不同的解决方案后，我有一个有效的不同的文本宽度，任何可能的背景，没有添加额外的标记。

h1 { 溢出:隐藏; text-align:中心; ｝ h1:之前, h1:{后 background - color: # 000; 内容:“”; 显示:inline-block; 身高:1 px; 位置:相对; vertical-align:中间; 宽度:50%; ｝ h1:{之前 右:0.5 em; margin-left: -50%; ｝ h1:{后 左:0.5 em; margin-right: -50%; ｝ <标题>标题< / h1 > <h1>这是一个较长的标题</h1>

我在IE8、IE9、Firefox和Chrome浏览器上进行了测试。你可以在这里查看http://jsfiddle.net/Puigcerber/vLwDf/1/