CODEWITHSUNDEEP
htmlcss
Gandalf StormCrow
Gandalf StormCrow

Reputation: 26212

Creating ordered list of certain type css

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

Upvotes: 1

Views: 142

Answers (3)

canon
canon

Reputation: 41675

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) ") ";    
}

Upvotes: 1

Alexandru R
Alexandru R

Reputation: 8833

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>

Upvotes: 2

crush
crush

Reputation: 17013

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) ')';
}

Upvotes: 1

Related Questions