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。这是一个限制，因为它不是自动的，如果您在具有不同行高的元素上应用这些样式，那么您可能需要重新应用您的行高样式。

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

我已经尝试了大多数建议的方法，但结束了一些问题，如全宽度，或不适合动态内容。最后我修改了一个代码，并完美地工作。这个示例代码将在之前和之后绘制这些线条，并且在内容更改方面非常灵活。中心对齐。

HTML

        <div style="text-align:center"> 
            <h1>
                <span >S</span>
            </h1> 
        </div> 

        <div style="text-align:center"> 
            <h1>
                <span >Long text</span>
            </h1> 
        </div> 

CSS

      h1 {
            display: inline-block;
            position: relative;
            text-align: center;
        }

        h1 span {
            background: #fff;
            padding: 0 10px;
            position: relative;
            z-index: 1;
        }

        h1:before {
            background: #ddd;
            content: "";
            height: 1px;
            position: absolute;
            top: 50%;
            width: calc(100% + 50px);//Support in modern browsers
            left: -25px;
        }

        h1:before {
            left: ;
        }

结果: https://jsfiddle.net/fasilkk/vowqfnb9/

这为您提供了固定的线条长度，但效果很好。 行长可以通过添加或取'\00a0' (unicode空格)来控制。

H1:前，H1:后{ 内容:“\ 00 a0 \ 00 a0 \ 00 a0 \ 00 a0 '; 文字修饰:线穿过; 保证金:自动0.5em; } <标题>边线h1 > < /

这段代码将正常工作:

/* پخش زنده*/ .div-live { text-align:中心; ｝ .span-live { 显示:inline-block; 颜色:# b5b5b5; ｝ .span-live:之前, .span-live:{后 Border-top: 1px solid #b5b5b5; 显示:块; 身高:1 px; 内容:“”; 宽度:30%; 位置:绝对的; 左:0; 上图:3快速眼动; ｝ .span-live:{后 右:0; 左:汽车; ｝ < div class = " div-live”> <span class="span-live">پخش زنده</span> < / div >

这是一个基于Flex的解决方案。

h1 { 显示:flex; flex-direction:行; ｝ h1:之前,h1:{后 内容:“”; Flex: 11; Border-bottom: 1px solid; 保证金:汽车; ｝ h1:{之前 margin-right: 10 px ｝ h1:{后 margin-left: 10 px ｝ 今天< h1 > < / h1 >

JSFiddle: https://jsfiddle.net/j0y7uaqL/

使用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 > < / >节