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>