CSS before по центру?

Question

[XenK]

Есть меню:

<ul class="menu">
        <li class="done">Item1</li>
        <li>Item2</li>
        <li>Item3</li>
        <li>Готово</li>
    </ul>

При добавлении класса "done", к li, должна добавляться галочка, пробовал так:

.menu > .done:before {
    content: ' ';
    background: url(../images/done.svg) no-repeat;
    width: 15px;
    height: 15px;
    position: absolute;
    margin-top: -1.5em;
}

Получилось так:


А должно вот так:


Как это можно сделать?

Answer 1

[Алексей Скляров]

left:50%;
margin-left:-7.5px;

Плюс проверьте наличие position:relative у родителя.

Comments

[XenK]

Алексей Скляров тогда галочка появляется только у itemwd1

[Алексей Скляров]

XenK: на jsfiddle покажите код

[alvvi]

XenK: скорее всего она появляется у всех, но position:relative на родителе, а не на самих итемах

Answer 2

[one_day]

.menu > .done:before {
    content: '1';
    background: url(../images/done.svg) no-repeat;
    width: 15px;
    height: 15px;
    position: relative;;
    margin-top: -1.5em;
  left: 50%;
  top: -15px;;
}