Text centered between lines (css)

by ashleycam3ron

HTML

<h1>This is a longer heading</h1>

CSS

h1 {
    overflow: hidden;
    text-align: center;
    font-size: 1em;
}
h1:before,
h1:after {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    content: "";
    display: inline-block;
    height: .1em;
    position: relative;
    vertical-align: middle;
    width: 50%;
    margin-bottom: .15em;
}
h1:before {
    right: 0.5em;
    margin-left: -50%;
}
h1:after {
    left: 0.5em;
    margin-right: -50%;
}