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;

Answer 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.