しるてく

技術的な話をします

list-styleで括弧付の数字を振りたいとき

css

ちょっと前に友人と話していたのですが、 list-styleで（）付きの数字をつける方法。
動作確認はあまりしていないですが、最近のは大体大丈夫なはずです。IE7はダメです。

<!DOCTYPE html>
<html>
<head>
  <style>
    ol li{
      list-style-type:none;
      list-style-position:inside;
      counter-increment: cnt;
    }
    ol li:before{
      display: marker;
      content: "(" counter(cnt) ")";
    }
  </style>
</head>
<body>
<ol>
  <li>test</li>
  <li>test</li>
  <li>test</li>
</ol>
</body>
</html>

li以外でもこんな感じに使えます。

h2 { counter-increment : chapter ; }
h2:before { content : "第" counter(chapter) "条" ; }