2 Lines behind Headers CSS

Question

I would like to put 2 lines behind my headers on my website. I have found CSS to put one solid line behind the text, but I'd really like to have two lines behind my text of different widths (one a little bit thicker with space in between them).

Would anyone know how to adjust this code to make it possible to have two lines behind the text?

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's the HTML:

<h1>Header Title Goes Here</h1>

And if it's not as simple as just adjusting this code, is there any CSS method I could use to achieve this effect?

Answer 1

As opposed to setting a height/background, you can alternatively set a border instead.

jsFiddle demo

Updated for margins..

I added 2% I don't know if that enough, but you can just change margin-left you will notice a difference in 2%.

jsFiddle demo - with margins.

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