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

概述我被要求创建这个标题,纯粹用css,它甚至可能吗？ 文本的背景需要保持透明,h2需要跨越任何容器的宽度,并且左右边框自动填充剩余空间. h2 { font-size:42px; line-height:48px; width:100%; overflow: hidden; &:before { content:''; posi 我被要求创建这个标题,纯粹用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.

总结

以上是内存溢出为你收集整理的html – 标题,两侧填充剩余空间全部内容，希望文章能够帮你解决html – 标题,两侧填充剩余空间所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。