Q: Why is :after not working properly on this span? I'm stuck with the following code:
<h1>
  Registrer faktura
  <span class="helpToggle" style="cursor:pointer;" title="Vis hjelpetekst"> Hjelp</span>
</h1>

//CSS
h1 .helpToggle {
    display: inline-block;
    width: 40px;
    text-indent: 20px;
    border: solid 1px red;
    overflow: hidden;
}

h1 .helpToggle:after {
    content: '?';
    display: inline-block;
    height: 32px;
    width: 32px;
    border: solid 1px green;
}

I'm not happy about having a <span> tag inside the H1 tag, but according to HTML5, this is now ok - and I'm not able to edit the HTML code (just the styling).
My goal is to replace the help text inside the span tag with a question mark. But for some reason the ? is placed inside the span.
I can't figure out why this is happening and I was hoping some one else can see what is happening.
See my fiddle here.

A: You could use visibility in combination with ::before pseudo-element instead of ::after.
Demo: http://jsfiddle.net/abhitalks/E98SE/9/
CSS:
h1 .helpToggle {
    border: solid 1px red;
    position: absolute;
    visibility: hidden;
}
h1 .helpToggle::before {
    content:'?';
    visibility: visible;
    border: solid 1px green;
}

The visibility: hidden; will leave the space occupied by the element as-is, hence we use the ::before pseudo-element to ensure that the ? is displayed before the occupied space. Making it absolutely positioned will take it out of the flow.

A: You want to replace the word Help with a question mark? Then :after actually is not the thing, it will place the question mark AFTER the element.
BUT you can hide the span and make the :after Element visible:
h1 .helpToggle {
    visibility: hidden;
    text-indent: 20px;
    border: solid 1px red;
    overflow: hidden;
    font-size: 0px;
}

h1 .helpToggle:after {
    visibility: visible;
    content: '?';
    border: solid 1px green;
    font-size: 24pt;
}

Live demo: http://jsfiddle.net/w5B4Z/
