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?

Title with lines left and right filling remaining space

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.

score 22 · Accepted Answer · edited May 23 '17 at 11:53

22

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.

edited May 23 '17 at 11:53

Community

1
1

answered Jun 02 '15 at 09:00

web-tiki

99,765
32
217
249

Probably because the image link is dead and font color is white. – Max Payne Jun 09 '15 at 09:42
@TimKrul thx for reporting the issue, I changed the image. Hopefully it works now – web-tiki Jun 09 '15 at 09:48

score 2 · Answer 2 · answered Jun 02 '15 at 08:57

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

This gives you horizontal scrolling and only works with that exact length of text — pstenstrm, Jun 02 '15 at 08:59
that correct, as I said, ***if*** you're not fussed about absolute positioning and it will need tweaking for implementation — atmd, Jun 02 '15 at 09:01

score 1 · Answer 3 · answered Jun 02 '15 at 14:53

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>

score 0 · Answer 4 · answered Jun 02 '15 at 09:09

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

score 0 · Answer 5 · answered Jun 02 '15 at 09:16

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>

Not really helpful man as it requires two other elements to work but thanks anyway — Shannon Hochkins, Jun 02 '15 at 11:37

Title with lines filling remaining space on both sides

5 Answers5

Linked

Related