标题后面2行CSS

我想在我的网站标题后面放两行。我发现CSS在文本后面放了一条实线，但我真的希望文本后面有两条不同宽度的线（一条稍粗一点，中间有空格）

有人知道如何调整这个代码，使文本后面有两行代码成为可能吗

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;
}

以下是HTML：

<h1>Header Title Goes Here</h1>

标题在这里

---

如果不只是调整代码那么简单，有没有什么CSS方法可以达到这个效果？

与设置高度/背景相反，您也可以设置边框

已更新页边距。

我添加了

2%

我不知道这是否足够，但您可以只更改

左边的边距

您会注意到

2%

中的差异

-有利润

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;
}

---

所以基本上，你想让这一行在文本后面。。？喜欢不完全是。我确实希望这一行在正文后面，像这样：但我也希望有第二行，在第一行的正下方稍微粗一点。因此文本后面会有两行。我只是不知道如何获得这种效果。第三个例子很完美。非常感谢你的帮助@Noelle很高兴这有帮助。你知道如何在单词的两边加上填充物，这样字母和行之间就有更多的空间了吗？我尝试添加填充物，但似乎不起作用。太好了！这么简单的修复。。。我不知道为什么我很难想到这些事情！哈哈，马上投票！仅供参考，这并不适用于所有浏览器。它在safari 5.1上失败——只有：after出现在它应该出现的地方。：before显示得太左（被溢出设置隐藏）