use：before和：after元素填充文本元素的剩余空间

Question

我正在尝试创建一种效果，该效果基本上构成一个标题标记，其中两行填充容器的剩余宽度。我正在尝试创建它，以便无论标题文本的长度如何，您仍然可以获得相同的效果+间距量。这张图片更好地展示了我想要解释的内容：

我最接近的是使用百分比宽度，但如果只使用一个小标题，则剩余空间很多。通常我会在我的标题标签中为span对象添加背景颜色，但我也试图这样做，以便效果适用于不同的背景颜色。

这是一个jsfiddle：https://jsfiddle.net/wv9zcuvm/和一些代码：

HTML：

<h2><span>Small title</span></h2>

CSS：

h2{
    width:100%;
    position:relative;
    top:0; left: 0;
}

h2:before,
h2:after{
    content:"";
    display:inline-block;
    width:30%;
    height:1px;
    background-color:red;
    position:relative;
    top: -10px;
}

h2:before{
    left:0;
}

h2:after{
    right:0;
}

h2 span{
    width:40%;
    display:inline-block;
    text-align:center;
}

有人可以建议我如何实现我想要创造的东西吗？

Answer 1

您可以使用display:flex;而不使用span标记

h2 {
  display: flex;
}
h2:before,
h2:after {
  content: '';
  flex: 1;
  margin: auto 1em;
  height: 0;
  border-top: solid red 1px;
}

<h2>Small title</h2>
<h2>This is a very long title</h2>

h2 {
  display:flex;
  text-align:center;
  }
h2:before,
h2:after {
  content:'';
  flex:1;
  margin:auto 1em;
  height:0;
  border-top:solid red 1px;
  }

<h2>Big long title <br/>on two lines ? title</h2>

Answer 2

如果您可以强制使用span元素的背景，可以这样做：http://jsfiddle.net/2tvmm2rL/

h2{
    width: 100%;
    position: relative;
    top:0; left: 0;
    text-align: center;
}

h2:before {
    content:"";
    display: inline-block;
    width: 100%;
    height: 1px;
    background-color: red;
    position:absolute;
    top: 50%;
    z-index: -1;
    left:0;
}

h2 span {
    display: inline-block;
    text-align: center;
    background: white;
    padding: 0 10px;
}