CSS :Фоновое изображение и заполнение

Я хочу добавить фоновое изображение справа от элементов списка, а также хочу иметь отступ справа, но я не могу сделать это. Пожалуйста, взгляните на следующий пример:

HTML:

    
Hello
    
Hello world

CSS:

ul{
    width:100px;  
}

ul li{
    border:1px solid orange;
    background: url("arrow1.gif") no-repeat center right;
}

ul li:hover{
     background:yellow url("arrow1.gif") no-repeat center right;
}

Я знаю, что мы можем установить положение изображения в пикселях, но так как каждый из li имеет разную ширину, я не могу этого сделать.

Вот ссылка JSFiddle: http://jsfiddle.net/QeGAd/1/