html – 标题,两侧填充剩余空间

我被要求创建这个标题,纯粹用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;
    }
}

左侧很容易,但是我被困在右侧.

https://jsfiddle.net/kab5qtbb/

我似乎无法弄清楚如何只使正确的线填充容器右侧的剩余空间.

解决方法

您可以使用保证金权利：-100％;和vertical-align：middle; on：after伪元素. (基于这个答案： Line separator under text and transparent background)：

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.

原文地址：https://www.jb51.cc/html/226847.html