CODEWITHSUNDEEP
css
AlexStack
AlexStack

Reputation: 17421

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

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.

Upvotes: 9

Views: 4999

Answers (2)

Jared Farrish
Jared Farrish

Reputation: 49218

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:

Upvotes: 10

Juan Rangel
Juan Rangel

Reputation: 1793

You can use the counter property is CSS. 

<ol>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
  <li>Vestibulum auctor dapibus neque.</li>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
  <li>Vestibulum auctor dapibus neque.</li>
</ol>  



ol { list-style: none; 
counter-reset:array;}
ol li:before {
counter-increment:array;
content:"[" counter(array) "] ";
}

http://codepen.io/Nunotmp/pen/duhAb

Upvotes: 2

Related Questions