CODEWITHSUNDEEP
htmlcsscss-shapes
Shannon Hochkins
Shannon Hochkins

Reputation: 12176

Title with lines filling remaining space on both sides

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.

Upvotes: 9

Views: 2938

Answers (5)

web-tiki
web-tiki

Reputation: 103810

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.

Upvotes: 22

Persijn
Persijn

Reputation: 14990

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>

Upvotes: 1

Nefro
Nefro

Reputation: 185

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>

Upvotes: 0

sandeep_1994
sandeep_1994

Reputation: 7

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

Upvotes: 0

atmd
atmd

Reputation: 7490

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

Upvotes: 2

Related Questions