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?

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

HEALTH BENEFITS
HEALTH

Note that I also simplified your CSS.