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

}

}

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

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