html - 順序付けられたリスト番号とコンテンツの異なるスタイル

Question

各リスト要素内にある種の div または span タグを持たずに、順序付きリストの数字 (または文字や数字など) をコンテンツとは異なるスタイルにすることは可能ですか?

Answer 1

list-style を「none」に設定し、デフォルトの番号付けを CSS カウンターと疑似要素に置き換えることで可能です。例: http://jsbin.com/agagoc/1/edit

ol {
  list-style: none;
  counter-reset: my-awesome-counter;
}

li {
  counter-increment: my-awesome-counter;
}

li:before {
  content: counter(my-awesome-counter);
  /* any style for numbers, as if they were spans before the content of LIs, goes here */
}

Answer 2

はい、あなたはこれを好きにすることができます：

li {
  list-style: none;
  counter-increment: myCounter;
}
li:before {
    content: counter(myCounter);
    font-size: 19px;
    color: red;
}