Красивый нумерованный список на jQuery

На днях понадобилось сверстать вот такой нумерованный список:

1. 1Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться.
2. 2Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться.
3. 3Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться.

Посредством CSS этого добиться невозможно, по этому я решил использовать jQuery:

$('ol.custom li').each(function(){
	$(this).prepend('<span>' + ($(this).index() + 1) + '</span>');
});

При этом с самим списком ничего делать не нужно (никаких вложенных тегов и т.д.), только добавить класс custom к тегу ol и задать стили для тегов li и вложенных в них span:

ol.custom li {
    list-style:none;
    margin:0 0 15px 0;
}
ol.custom li span {
    display:block;
    float:left;
    width:21px;
    height:19px;
    padding-top:2px;
    margin-right:10px;
    text-align:center;
    color:#fff;
    background:#84c225;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
}

В примере я использовал css3, но можно конечно сверстать и на картинках.

Конечно только ради одного списка использовать jQuery не целесообразно, лучше написать на голом js. Но в моем случае эта библиотека уже была подгружена и я решил не изобретать велосипед.