CSS - Custom List while keeping default decimal counter

Question

I am making a custom ol>li to look like this

1 | List content

2 | List content

3 | List content

I have referenced this post: HTML + CSS: Ordered List without the Period?

But, I cannot get the numbers to appear, and they need to appear without periods while following standard numeric count.

here is my code:

#content ol > li:before{
    content: counter(customlistcounter) " |";
    counter-increment: customlistcounter;
    margin-left: -21px;
    float: left;
    width: 1em;
}
#content ol li{
    padding-left: 21px;

score 1 · Accepted Answer · answered Sep 18 '11 at 05:10

1

You were missing a couple steps to get it to work there with the css; primarily adding: #content ol:first-child { counter-reset: customlistcounter;}. I set up an example so you can see how its now working correctly here: http://jsfiddle.net/n5wx4/

Like the other poster says though remember this only works with somewhat newer browsers so IE 6 and 7 are out.

answered Sep 18 '11 at 05:10

Paul Graffam

2,139
2
18
20

1

Glad to help :) Just fyi but you might want to set this answer as accepted to improve your own accepted score and also to help others looking for answers with your same issue. – Paul Graffam Sep 18 '11 at 05:49

CSS - Custom List while keeping default decimal counter

1 Answers1