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

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>

我使用一个表格布局来动态填充边和0高度，绝对位置div动态垂直定位:

没有硬编码的维度 没有图像 没有它 方面的背景 控制条外观

https://jsfiddle.net/eq5gz5xL/18/

我发现，稍微低于真中心的文字效果最好;这可以在55%的位置进行调整(身高越高，界限越低)。线条的外观可以改变边界底部的位置。

HTML:

<div class="title">
  <div class="title-row">
    <div class="bar-container">
      <div class="bar"></div>
    </div>
    <div class="text">
      Title
    </div>
    <div class="bar-container">
      <div class="bar"></div>
    </div>
  </div>
</div>

CSS:

.title{
  display: table;
  width: 100%
  background: linear-gradient(to right, white, lightgray);
}
.title-row{
  display: table-row;
}
.bar-container {
  display: table-cell;
  position: relative;
  width: 50%;
}
.bar {
  position: absolute;
  width: 100%;
  top: 55%;
  border-bottom: 1px solid black;
}
.text {
  display: table-cell;
  padding-left: 5px;
  padding-right: 5px;
  font-size: 36px;
}

这大概就是我要做的:通过设置包含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/

这是一个基于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/

如果你正在使用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;

结果:

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