Busy indicator in pseudo after element next to/outside button - html

Question

I want to display a css based busy indicator next to a submit button. I use the after pseudo element for this, but I fail to place the indicator icon next to/ outside the button.
Obviously I can add a rule like left: 100px to push it right and outside the button, but that is not what I am looking for: still the space is reserved inside the button. I cannot use absolute positioning, since the button text is flexible (translations).
So I guess my question is something like "how to I take the after pseudo element out of the flow" or similar.
Note that I do not want to embed the button inside an additional container to place the busy indicator inside the DOM.
Here is a small example to illustrate what I mean: jsfiddle
The HTML markup:
<button>text on button</button>
The CSS rules:
button{
display: inline-block;
position: relative;
float: left;
padding: 10px;
font-size: 60px;
}
button:after{
content: url("https://skitch-img.s3.amazonaws.com/20120509-qf93juewhfhk69k9i42kfxbi3r.png");
position: relative;
padding: 0;
margin: 0;
}

Answer 1

I can't understand this:
I can add a rule like left: 100px to push it right and outside the button, but that is not what I am looking for: still the space is reserved inside the button. I cannot use absolute positioning, since the button text is flexible (translations)
What do you mean?
Here is a jsFiddle which appears to solve your problem. Give the element absolute positioning, and give it a negative right value to push it beyond the right-hand-edge of the parent.
If this answer is not correct can you produce a Fiddle illustrating the problem?

Answer 2

I am not sure if that's what you mean but try this:
http://jsfiddle.net/h5avjzq3/2/
Basically, since the button is dynamic in width, I use
margin-left: calc(100% + 10px);
position: absolute;
left: 0;
that will make sure the button is always right to the button, but you have to actually reserve the space now. (you said it's already done)