Grow your CSS skills. Land your dream job.

CSS Counter

  • # November 9, 2011 at 12:55 pm

    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?

    # November 9, 2011 at 4:33 pm

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

    # November 9, 2011 at 4:33 pm

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

    # November 10, 2011 at 4:08 am

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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".