Weird positioning issue with special character pseudo elements

I have this fiddle:

Refer to the section-heading class elements. They have a ::before pseudo element. Just adding a margin to these elements screws the position of the pseudo element (remove the added margin to see how it should look). If you don’t use a special character, the positioning does not get screwed up. Why this behavior? I’m just curious, I can work around it.