标题用线条填充两侧的剩余空间

Question

我被要求仅使用css来创建此标题，甚至可以吗？

标题，左右两行填充剩余空间

文本的背景需要保持透明，h2需要跨越任何容器的宽度，并且左右边界自动填充剩余空间。

h2 {
    font-size:42px;
    line-height:48px;
    width:100%;
    overflow: hidden;
    &:before {
        content:'';
        position:relative;
        padding-left:50px;
        padding-right:10px;
        margin-right:10px;
        margin-bottom:10px;
        background:red;
        height:3px;
        display:inline-block;
    }
    &:after {
        content:'';
        margin-left:10px;
        width:100%;
        background:red;
        height:3px;
        display:inline-block;
    }
}

左侧很简单，但是我被困在右侧。

我似乎无法弄清楚如何仅使正确的行填充容器右边的剩余空间。

Answer 1

您可以在 伪元素上使用margin-right:-100%;和。（基于此答案：文本和透明背景下的行分隔符）：vertical-align:middle;:after

h2 {

  font-size: 42px;

  line-height: 48px;

  width: 100%;

  overflow: hidden;

}

h2:before, h2:after {

  content: '';

  display: inline-block;

  vertical-align:middle;

  width:50px;

  height:3px;

  border-top:1px solid #fff;

  border-bottom:1px solid #fff;

}

h2:after {

  width:100%;

  margin-right: -100%;

}



/**** FOR THE DEMO ***/

body{background-image: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-repeat:no-repeat;background-size:cover;color:#fff;}


<h2>HEALTH BENEFITS</h2>

<h2>HEALTH</h2>

请注意，我还简化了CSS。