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

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

如果有人想知道如何设置标题，使其显示在左侧的固定距离(而不是如上所示的居中)，我通过修改@Puigcerber的代码来解决这个问题。

h1 {
  white-space: nowrap;
  overflow: hidden;
}

h1:before, 
h1:after {
  background-color: #000;
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
}

h1:before {
  right: 0.3em;
  width: 50px;
}

h1:after {
  left: 0.3em;
  width: 100%;
}

这里是JSFiddle。

如果你正在使用React与样式组件。我发现分离元素更简单。不是“神奇的解决方案”，但它确实有效。

import React from 'react';
import styled from "@emotion/styled";

const Container = styled.div`
  padding-top: 210px;
  padding-left: 50px;  
  display: inline-flex;
`

const Title1 = styled.div`
  position: absolute;
  font-size: 25px;
  left:40px;
  color: white;
  margin-top: -17px;
  padding-left: 40px;
`

const Title2 = styled.div`
  position: absolute;
  font-size: 25px;
  left:1090px;
  color: white;
  margin-top: -17px;
  padding-left: 40px;
`

const Line1 = styled.div`
  width: 20px;
  border: solid darkgray 1px;
  margin-right: 90px;
`
const Line2 = styled.div`
  width: 810px;
  border: solid darkgray 1px;
  margin-right: 126px;
`
const Line3 = styled.div`
  width: 178px;
  border: solid darkgray 1px;
`


const Titulos = () => {
    return (
        <Container>
            <Line1/>
            <Title1>
                FEATURED
            </Title1>
            <Line2/>
            <Line1/>
            <Title2>
                EXCLUSIVE
            </Title2>
            <Line3/>
        </Container>
    );
};

export default Titulos;

结果:

使用Bootstrap 4的人可以用这种方法实现。HTML代码中提到的类来自Bootstrap 4。

h1 {
    position: relative;
    flex-grow: 1;
    margin: 0;
}

h1:before {
   content: "";
   display: block;
   border-top: solid 2px blue;
   width: 100%;
   height: 1px;
   position: absolute;
   top: 50%;
   z-index: 1;
 }
 h1 span {
   background: #fff;
   left: 12%;
   padding: 0 15px;
   position: relative;
   z-index: 5;
 }

然后像这样编写HTML

<div class="d-flex flex-row align-items-center">
  <h1><span> Title </span> </h1>
</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 >

好吧，这个更复杂，但它适用于所有浏览器，除了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/