我被要求创建这个标题,纯粹用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;
}
}
左侧很容易,但是我被困在右侧.
我似乎无法弄清楚如何只使正确的线填充容器右侧的剩余空间.