Adding Lines to the Sides of Text

I recently had a designer hand me a file with this in it:

Looks simple enough, right? But it’s actually a little tricky with CSS. Here is how I ended up handling it:

h6 {
    overflow: hidden;
    text-align: center;
}
h6:before,
h6:after {
    background-color: #fff;
    content: "";
    display: inline-block;
    height: 2px;
    position: relative;
    vertical-align: 40%;
    width: 50%;
}
h6:before {
    right: 0.5em;
    margin-left: -50%;
}
h6:after {
    left: 0.5em;
    margin-right: -50%;
}

Thank you to Pablo Villoslada Puigcerber for this that helped me figure it out: http://jsfiddle.net/Puigcerber/vLwDf/. Also everything he did worked for me, but when I needed to make the line thicker, it wasn’t centering the way I wanted it to. So I had to change the vertical-align to 40%. I’ve also seen this done with two lines on CSS Tricks. Very nice look!

The following code will give you double lines:

h4 {
    overflow: hidden;
    text-align: center;
}
h4:before,
h4:after {

    content: "";
    display: inline-block;
    height: 10px;
    position: relative;
    vertical-align: 10%;
    width: 50%;
	border-bottom: 1px solid #cacaca;
	border-top: 1px solid #cacaca;
}
h4:before {
    right: 0.5em;
    margin-left: -50%;
}
h4:after {
    left: 0.5em;
    margin-right: -50%;
}