html - 特定のタイプの CSS の番号付きリストの作成

Question

次のようなhtml/cssで順序付きリストを作成することは可能ですか:

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

このようにレンダリングされる場所 (括弧を含む):

(1) One
(2) Two

Answer 1

はい、できます。次のコードを試してください。古いバージョンの IE や Firefox では動作しない場合があります。

更新: ここに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>

Answer 2

css カウンターを確認してください。ここにフィドルがあります。

マークアップ:

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

CSS:

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

Answer 3

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