Как в CSS показать нечто слева от элемента не сдвигая сам элемент?

Question

[zencd]

Пробовал такой код. Последний элемент H1 сдвигается вправо, а хотелось бы их всех видеть выравненными.

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

[B@rmaley.e><e]

#container {
    margin-left: 100px;
}

.special {
    position: relative;
}

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

Comments

[zencd]

Работает, спасибо!

Answer 2

[Zamorozka]

А зачем вы используете целых три тега h1? Это совсем не айс, во первых w3c валидацию не пройдете, а во вторых такие сайты гугль не индексирует.

По контракту — один элемент h1 на страницу.