Title with hr line

Question

I need to made simple title but with line crossing it. Just like on the picture:

Here is CODE:

• HTML:

            <div id="intro">
            <div class="bg_big bg_big_green glow"><div id="opac1"><h1>TITLE WITH LINE</h1><p>111</p></div></div>
                <div class="story">
                <div class="float-left">
  
  
                </div>
              </div> <!--.story-->
  
  
            </div> <!--#intro-->
  

All code in here: JSfiddle

Answer 1

This is fairly simple.

First, give your container a text-align:center and your title a display:inline-block and position:relative. This will center your title and make it a block. Then, using ::before and ::after pseudo-elements, style and position lines at either side. I've found this to the the most beneficial method as it will position itself according to the length of you h1.

Here's a cleaned up fiddle: http://jsfiddle.net/rgthree/k4Bq4/8/

/* The h1's container */
#opac1 {
  text-align:center;
}
h1 {
    position:relative;
    display:inline-block;
}
h1::before, h1::after {
    content:' ';
    display:block;
    position:absolute; top:50%; left:-120px;
    width:100px; /* 100px line on either side */
    border-bottom:1px solid #FFF;
}
h1::after {
    left:auto; right:-120px; /* make the "after" position on the right side of the h1 */
}