Header with lines filling the remaining space on both sides.

Question

I was asked to create this header using css only, is this possible?

The background of the text should remain transparent, h2 should cover the width of any container, and the left and right borders will automatically fill the remaining space.

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; } } 

The left side is simple, however I am stuck on the right side.

https://jsfiddle.net/kab5qtbb/

I can’t understand how to make the right line, fill the remaining space to the right of the container.

Answer 1

You can use margin-right:-100%; and vertical-align:middle; in the pseudo-element :after . (Based on this answer: Line separator in 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> 

Please note that I also simplified your CSS.

Answer 2

If you are not too fussed about absolute positioning, you can do

  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; border-top:1px solid #000; border-bottom:1px solid #000; height:3px; display:inline-block; } &:after { content:''; margin-left:10px; width:50%; height:3px; position:absolute; border-top:1px solid #000; border-bottom:1px solid #000; top:60px; } } 

setup will be required, but in jsfiddle it will give you what you need

Answer 3

Here is a solution using display: table;
and display: table-cell;

Lines on the side grow and shrink after the contents of the header.

 .headline { display: table; line-height: 3px; white-space: nowrap; } .headline:before { width: 20%; height: 2px; margin-top: 20px; border-right: 10px solid transparent; } .headline:after { width: 80%; border-left: 10px solid transparent; } .headline:before, .headline:after { content: ''; display: table-cell; border-top: 1px solid black; border-bottom: 1px solid black; } 

 <h2 class="headline"> Headline </h2> <h2 class="headline"> Headline thats longerrrrrrrrrrrrrrrrr </h2> 

Answer 4

  <style type="text/css"> h2 { background-image:url(\.give url....); font-size: 42px; line-height: 48px; width: 100%; overflow: hidden; } h2:before { content: ''; position: relative; padding-left: 50px; padding-right: 10px; margin-right: 10px; margin-bottom: 10px; background: red; height: 3px; display: inline-block; } h2:after { content: ''; margin-right: -100%; width: 100%; background: red; height: 3px; display: inline-block; vertical-align:middle; } </style> 

html: -

you also need to add a background image or use css3 gradients.

Answer 5

This is what I used :)

https://jsfiddle.net/v7gze6ox/2/

 fieldset { border: 0px; border-top: 3px solid red; display: block; padding-left: 25px; padding-right: 25px; width: 100%; } fieldset h2 { margin: 10px; color: white; } .bg { background: url("http://images.all-free-download.com/images/graphiclarge/abstract_vector_green_background_277778.jpg"); } 

 <div class="bg"> <fieldset> <legend align="right"> <h2>Text</h2> </legend> </fieldset> </div>