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?

So basically, you want the line to go behind the text..? Like.. http://jsfiddle.net/g7zSZ/ ? — Josh Crozier, Oct 03 '13 at 00:39
Not quite. I do want the line to go behind the text, like this: http://jsfiddle.net/jxszY/1/ But I would also like a second line, slightly thicker right under the first line. So there would be two lines going behind the text. I just don't know how to acchieve this effect. — nellygrl, Oct 03 '13 at 00:46

Josh Crozier · Accepted Answer · 2013-10-03T01:19:20.873

3

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

edited Oct 03 '13 at 01:19

answered Oct 03 '13 at 00:53

Josh Crozier

233,099
56
391
304

1

The third example is perfect. Thank you so much for your help! – nellygrl Oct 03 '13 at 01:04
Would you happen to know how to add padding on both sides of the words so that there's a little more space between the letters and the lines? I tried adding padding but it doesn't seem to work. – nellygrl Oct 03 '13 at 01:05
Perfect! Such a simple fix... I don't know why it's so hard for me to think of these things! lol. Up voting right away! – nellygrl Oct 03 '13 at 01:15
FYI, this doesn't work in all browsers. it fails on safari 5.1 -- only the :after appears where it should. the :before appears too far to the left (hidden by the overflow setting) – Jonathan Vanasco Nov 15 '13 at 23:05
Check out this approach, which does work on Safari -- http://stackoverflow.com/a/14731123/442650 – Jonathan Vanasco Nov 15 '13 at 23:18

2 Lines behind Headers CSS

1 Answers1

Linked