html - 各リスト項目の右側に画像がある順序付きリスト

Question

各リスト項目の左側にいくつかのアイコンがある順序付きリストを作成したいと思います。レイアウトはこんな感じでお願いします

<image1><image2> 1. Lorem Ipsum
<image2><image2> 2. Lorem Ipsum
<image3><image2> 3. Lorem Ipsum

リスト項目のテキストの右側に画像を簡単に配置できますが、順序付きリストの各番号の左側に画像を配置できないようです。

Answer 1

これが更新されたソリューションです。

HTML:

<ol class="img">
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
</ol> 

CSS:

ol.img li{background: url("http://www.siguccs.org/Conference/Fall2007/images/icon_bullet.gif") no-repeat scroll 1px 5px transparent;
    list-style-position: inside;
    padding-left: 16px;}

Answer 2

css の :before 疑似要素を使用したソリューション:

    li {
    position: relative;
}
li:before {
    content: "";
    width: 15px;
    height: 15px;
    position: absolute;
    left: -40px;
    background: url(http://www.hadley.edu/images/RightTriangleIcon.png);
    background-size: contain;
}

http://jsfiddle.net/poselab/Qcejy/