How to show something to the left of an element in CSS without shifting the element itself?

Question

css

I tried this code. The last H1 element is shifted to the right, but I would like to see them all aligned.

jsfiddle.net/HQLfr/

<div id=container>
    <h1>one</h1>
    <h1>two</h1>
    <h1 class="special">three</h1>
</div>

#container {
    margin-left: 100px;
}

.special:before {
    content: '[x]';
    position: relative;
    left: -30px;
}

Answer 1

#container {
    margin-left: 100px;
}

.special {
    position: relative;
}

.special:before {
    content: '[x]';
    position: absolute;
    left: -30px;
}

Answer 2

Why are you using three h1 tags? This is not ice at all, firstly you will not pass w3c validation, and secondly, Google does not index such sites.
By contract, one h1 element per page.