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