html - CSSの順序付きリスト、番号の背景のスタイルを設定する方法はありますか？

Question

順序付きリスト1、2、3、4などをスタイリングしています...

各番号の後ろに画像を配置して、1、2、3、4がその上に表示されるようにする方法はありますか？

例えば：

image[1.] List Item 1

image[2.] List Item 2

image[3.] List Item 3

image[4.] List Item 4

Answer 1

はい。ol .li:before数字の後ろに画像を移動するために使用できます。list-style-position: inside;また、番号をリストアイテム自体の内側に移動して、li要素の背景を設定するために使用することもできます。

Answer 2

それを行う別の方法は、各リストアイテムに画像を追加してから、その位置をシフトすることです。フィドルを参照してください。簡単だったので、画像の代わりにdivを使用しました。ただし、この方法は、奇妙に見えないことを確認するために、さまざまなブラウザでテストする必要があります。

<ol>
    <li> 
        <div class="list-image"></div>
        foo
    </li>    
    <li>
        <div class="list-image"></div>
        bar 
    </li>
</ol>​

css：

ol{
   list-style-type:decimal;
   padding:50px 50px;
}

.list-image{
   width:20px;
   height:20px;
   position:relative;
   background-color:lightgray;
   top:20px;
   left:-25px;    
   z-index:-1;
}
​

Answer 3

:marker疑似要素を調べます。

http://dev.w3.org/csswg/css3-lists/#marker-pseudo-element