Besides allowing any kind of background, my solution doesn’t add any extra HTML tag and scales with every size of text.
h
1
{
overflow
:
hidden
;
text-align
:
center
;
}
h
1:
before,
h
1:
after {
background-color
:
#000
;
content
:
""
;
display
: inline-
block
;
height
:
1px
;
position
:
relative
;
vertical-align
:
middle
;
width
:
50%
;
}
h
1:
before {
right
:
0.5em
;
margin-left
:
-50%
;
}
h
1:
after {
left
:
0.5em
;
margin-right
:
-50%
;
}