Title with lines filling remaining space on both sides

Question

I've been asked to create this title, purely with css, Is it even possible?

The background of the text needs to remain transparent, the h2 needs to span the width of any container and have the left and right borders fill automatically 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 easy, however I'm stuck on the right side.

https://jsfiddle.net/kab5qtbb/

I can't seem to figure out how to only make the right line fill the remaining space on the right of the container.

Answer 1

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

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

will need tweaking but in jsfiddle this gets you what you need

Answer 3

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

The lines on the side grow and shrink after the content 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>