CSS Counter

[AntonNiklasson]

Hey guys, I’ve got a question for you.

I’ve got this html table with two columns. It will contain a name, and a number.
So now I’d like to insert line numbers in front of each name, like this:

1. Joe Smith 12345

I do think it’s possible with pure CSS. Chris talks about a bit in this article down at the part where he styles a “code box”. There is a way of counting number of lines with CSS.

This is what I’m thinking:

tr:nth-child(n) td:first-child:before { content: counter(child) “. “; }

Any ideas?

[Chris Coyier]

Tried it out: http://jsfiddle.net/chriscoyier/dSmXY/4/

[Chris Coyier]

And for the record, that article was totally theoretical, it just so happens THIS works =)

[AntonNiklasson]

Nice :)
Oh, okey. Realized that just now. Thanks a lot Chris!

[Author]

Posts