Horizontal line with text in the middle using CSS

Here is the simple example to create horizontal line with text in the middle. The line is created by setting a border-bottom on the containing h2 then giving the h2 a smaller line-height. The text is then put in a nested span with a non-transparent background.

HTML:

<h2><span>This is main header</span></h2>

CSS:

h2 {
   width: 100%; 
   text-align: center; 
   border-bottom: 1px solid #000; 
   line-height: 0.1em;
   margin: 10px 0 20px; 
} 

h2 span { 
    background:#ffffff; 
    padding:0 10px; 
}

OUTPUT:

This is main header