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

This is what Im using :)

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>

Answer 2

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>

Answer 3

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

the html is:-

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

Answer 4

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 5

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