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