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 */
}

Answer 2

You should use CSS :before and :after psuedo classes. Chris Coyier has some excellent CSS tutorials you can find here

h1 {
    position: relative;
    font-size: 30px;
    z-index: 1;
    overflow: hidden;
    text-align: center;
}
h1:before, h1:after {
    position: absolute;
    top: 51%;
    overflow: hidden;
    width: 50%;
    height: 1px;
    content: '\a0';
    background-color: red;
}
h1:before {
    margin-left: -50%;
    text-align: right;
}
.color {
    background-color: #ccc;
} 

Here is a JSFiddle showing an example of using psuedo classes to add a line on either side of your header to achieve the desired effect. Good luck!

Answer 3

Could use some cleaning up, but this might get you started.

Basically I just played with the display properties.

Edit: I'll leave this here because it's still an option, but Paulie up there in the comment has a much better set of options.