最短最佳方法:

跨度:之后, 跨度:{之前 内容:“\ 00 a0 \ 00 a0 \ 00 a0 \ 00 a0 \ 00 a0”; 文字修饰:线穿过; ｝ <span>你的文本</span>

这段代码将正常工作:

/* پخش زنده*/ .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 >

好吧，这个更复杂，但它适用于所有浏览器，除了IE<8

<div><span>text TEXT</span></div>

div {
    text-align: center;
    position: relative;
}
span {
    display: inline-block;    
}
span:before,
span:after {
    border-top: 1px solid black;
    display: block;
    height: 1px;
    content: " ";
    width: 40%;
    position: absolute;
    left: 0;
    top: 1.2em;
}
span:after {
   right: 0;  
   left: auto; 
}

:before和:after元素的位置是绝对的，因此我们可以将一个元素拉到左边，一个元素拉到右边。此外，宽度(在本例中为40%)非常依赖于内部文本的宽度。我得想个解决办法。至少在顶部:1.2em可以确保即使字体大小不同，线条也或多或少地保持在文本的中心。

它似乎工作得很好:http://jsfiddle.net/tUGrf/3/

透明的单元素动态解决方案:

h2 { display:table; /* fit content width*/ margin:20px auto; /* center*/ padding:0 10px; /* control the space between the text and the line */ box-shadow:0 0 0 100px red; /* control the line length and color here */ --s:2px; /* control the line thickness*/ clip-path: polygon(0 0,100% 0, 99% calc(50% - var(--s)/2), 200vmax calc(50% - var(--s)/2), 200vmax calc(50% + var(--s)/2), 99% calc(50% + var(--s)/2), 100% 100%,0 100%, 1px calc(50% + var(--s)/2), -200vmax calc(50% + var(--s)/2), -200vmax calc(50% - var(--s)/2), 1px calc(50% - var(--s)/2)); } body { background: pink; } <h2>a Title here </h2> <h2 style="box-shadow:0 0 0 100vmax blue;">Title</h2> <h2 style="box-shadow:0 0 0 200px green;--s:5px">Another title Title</h2>

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

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/

这大概就是我要做的:通过设置包含h2的border-bottom来创建行，然后给h2一个较小的行高。然后将文本放在具有非透明背景的嵌套span中。

h2 { 宽度:100%; text-align:中心; Border-bottom: 1px实心#000; 行高:0.1 em; Margin: 10px 0 20px; ｝ H2跨度{ 背景:# fff; 填充:0 10 px; ｝ <h2><span>THIS IS A TEST</span></h2> <p>这是一些其他的内容</p>

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

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