CSS Ordered Lists，有沒有一種方法可以設置數字背景的樣式？

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;使用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