Why is :after not working properly on this span? - html

Question

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.

Answer 1

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.

Answer 2

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/