CSS Header Border Issue

Question

Having a bit of an issue getting my header tag borders correct.

I am aiming for a 1px bottom border, and a 2px darker 65px width border on top of it

Here's my code, and a link to the fiddle

h1, h2, h3{
    border-bottom:1px solid #ddd;
}
h1:before, h2:before, h3:before{
   content: " ";
   position: absolute;
   bottom:0;
   z-index: -1;
   width:65px;
   border-bottom: 2px solid #666;
}

http://jsfiddle.net/o7thwd/rqN4z/

Answer 1

http://jsfiddle.net/rqN4z/7/

you have to remove this line

h1:before, h2:before, h3:before{
   bottom:0; //remove this
}

Answer 2

You may need to make the h tags the relative parent of absolute :before elements. Try this:

h1, h2, h3 {
   position:relative;
}

The demo http://jsfiddle.net/BWT66/