Numbering an ordered list <OL> like an array, with brackets around the numbers

css

Solution

You can do something like this:

ol {
  counter-reset: o-counter -1;
  list-style-type: none;
}
ol li:before {
  content: '[' counter(o-counter) '] = ';
  counter-increment: o-counter;
}

http://jsfiddle.net/userdude/Fb3ab/2/

Keep in mind the `o-counter` (or whatever you call it) needs to be on the parent `UL`/`OL` for it to increment. And, IE7 does not support this either.

More information:

- http://www.w3.org/TR/CSS21/generate.html#counters

- http://css-infos.net/property/content

Problem

I have this list: ``` <ol start="0"> <li>Tokyo Skytree</li> <li>Canton Tower</li> <li>CN Tower</li> <li>Ostankino Tower</li> <li>Oriental Pearl Tower</li> </ol> ``` Which shows something like this: ``` 1. Tokyo Skytree 2. Canton Tower 3. CN Tower 4. Ostankino Tower 5. Oriental Pearl Tower ``` Now what I want is to have something like this: ``` [1] Tokyo Skytree [2] Canton Tower [3] CN Tower [4] Ostankino Tower [5] Oriental Pearl Tower ``` Ideally I want a 0-based array like: ``` [0] = Tokyo Skytree [1] = Canton Tower [2] = CN Tower [3] = Ostankino Tower [4] = Oriental Pearl Tower ``` I've read about CSS Numbering Style and CSS Lists W3C Draft but I cannot figure out a solution that works.

Original source