2 Lines behind Headers CSS

2 Lines behind Headers CSS

I would like to put a line 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?