Play using the ordered letter list

Question

Can anyone think of a way to use the numbers in the ol / li list to mark images?

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

When using some CSS, the following should be output:

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

Where each square is a small profile image.

I know that I can insert a new element in li with a number in it and manipulate it as necessary, but I would like to do this with the built-in ol numbering.

Answer 1

simple enough:

 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 .

This, of course, requires the user to have a browser with the ability to use css-generated content, which pretty much excludes IE.

Literature:

• Counters created using CSS .

Answer 2

It seems a bit hacked IMHO, but it works (in firefox atleast):

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; } 

I would just go with an additional element solution if I were you.

EDIT: tested in chrome, IE9 and 8. They seem to work sequentially. However, there are problems in IE7, but can probably be fixed with a small optional css browser.