Creating ordered list of certain type css

Question

Is it possible to create a ordered list with html/css like this :

<ol>
  <li>One</li>
  <li>Two</li>
</ol>

Where they would render like this (including parenthesis):

(1) One
(2) Two

for what it's worth: developer.mozilla.org/en-US/docs/Web/CSS/… — Peter Berg
– Peter Berg, Commented Jun 10, 2013 at 13:58

Alexandru R · Accepted Answer · 2013-06-10 14:02:54Z

2

Yes you can. Try the following code. It might not work in old versions of IE or Firefox.

UPDATED: Here is a JSFiddle.

CSS:

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

HTML:

<ol>
  <li>Number 1</li>
  <li>Number 2</li>
  <li>Number 3</li>
  <li>Number 4</li>
  <li>Number 5</li>
  <li>Number 6</li>
</ol>

edited Jun 10, 2013 at 14:02

answered Jun 10, 2013 at 13:57

Alexandru R

8,89416 gold badges69 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

BoltClock Over a year ago

@ErikMes: You must be doing something wrong then - every version of Firefox in existence has supported CSS counters from the get-go.

Airen Over a year ago

Good idea. If you want to know more why? You can click here.w3cplus.com/css3/css-generated-content-counters.html

canon · Accepted Answer · 2013-06-11 13:03:58Z

1

Check out css counters. Here's a fiddle.

markup:

<ol>
  <li>One</li>
  <li>Two</li>
</ol>

css:

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

edited Jun 11, 2013 at 13:03

answered Jun 10, 2013 at 13:57

canon

41.8k10 gold badges77 silver badges102 bronze badges

2 Comments

Laurent S. Over a year ago

There's a very good Smashing article about it : coding.smashingmagazine.com/2013/04/12/…

canon Over a year ago

@crush Doesn't matter... you don't have to be first to get rep. ;)

crush · Accepted Answer · 2013-06-10 14:00:23Z

1

See the following JSFiddle: http://jsfiddle.net/VzEsr/

HTML

<ol>
  <li>One</li>
  <li>Two</li>
</ol>

CSS

ol {
    list-style: none;
    counter-reset: count 0;
}

ol li {
    counter-increment: count 1;
}

ol li:before {
    content: '(' counter(count) ')';
}

answered Jun 10, 2013 at 14:00

crush

17.1k10 gold badges65 silver badges104 bronze badges

Collectives™ on Stack Overflow

Creating ordered list of certain type css

3 Answers 3

2 Comments

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Related