Игра с порядковым номером списка в формате bullet

Question

Может ли кто-нибудь подумать о способе использования чисел в списке ol/li?

<ol> 
    <li><img /></li> 
    <li><img /></li> 
    <li><img /></li> 
</ol> 

С некоторыми CSS применяется Вывести следующее:

------ ------ ------ 
| | | | | | 
| | | | | | 
| 1| | 2| | 3| 
------ ------ ------ 

Где каждый квадрат небольшой фотографии.

Я знаю, что могу вставить новый элемент в li с цифрой в него и манипулировать им по мере необходимости, но я бы хотел сделать это с помощью нумерации ol.

Answer 1

достаточно просто:

ol { 
    counter-reset: listCount; 
} 
li { 
    float: left; 
    border: 3px solid #f90; 
    counter-increment: listCount; 
    position: relative; 
} 
li:after { 
    content: counter(listCount,decimal-leading-zero); 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    width: 2em; 
    height: 2em; 
    color: #fff; 
    background-color: rgba(0,0,0,0.5); 
    text-align: center; 
    line-height: 2em; 
} 

JS Fiddle demo.

Это, конечно же, требует от пользователя наличия браузера с возможностью использования css-сгенерированного контента, что довольно исключает IE.

Ссылки:

• CSS-generated counters.

Answer 2

Кажется немного Hacky ИМХО, но это работает (в Firefox по крайней мере):

http://jsfiddle.net/ztfzt/14/

<ol> 
    <li><img src="http://placekitten.com/100/100" /></li> 
    <li><img src="http://placekitten.com/100/100" /></li> 
    <li><img src="http://placekitten.com/100/100" /></li> 
</ol> 

ol {} 
ol li { 
    float: left; 
    list-style-position: inside; 
    position: relative; 
    width: 100px; 
    height: 100px; 
    margin-right: 5px; 
    line-height: 170px; 
    text-indent: 85px; 
    color: #fff; 
} 
ol li img { 
    position: absolute; 
    left: 0; 
    top: 0; 
    z-index: -1; 
} 

я бы просто пойти с дополнительным раствором элемента, если я вам.

РЕДАКТИРОВАТЬ: проверено в хромированном, IE9 и 8. Кажется, что они работают последовательно. Тем не менее, проблемы в IE7, но, вероятно, могут быть исправлены с небольшим дополнительным браузером css.