css - adding line break on pseudo element -

after each h2 want append , style dash , after line break.

i tried following:

h2:after {     content: '\a\2014';     white-space: pre;     font-size: 70px; }

it work in general, when in- or decrease font-size, space both on , under dash change, instead of dash-size.

i tried adding line-height: 0.6em; seems move around.

at moment i'm getting this:

i want this, being able change space:

why don't use borders?

h2 { border-bottom: 4px solid #000; }

and adjust padding on bottom of h2:

h2 { padding-bottom: 15px; border-bottom: 4px solid #000; }

update based on comments

to keep dash same width regardless of title width styled :after pseudo element border , display block: http://jsfiddle.net/uzvhz/2

Sher