1. ayumisuzuki

    Posted

    ayumisuzuki
Changes in title
+[CSS] 番号付きリストの『番号』だけ色を変更する方法
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,26 @@
+
+```lang:CSS
+<ol>
+ <li>一つ目のリストです</li>
+ <li>二つ目のリストです</li>
+ <li>三つ目のリストです</li>
+ <li>四つ目のリストです</li>
+ <li>五つ目のリストです</li>
+</ol>
+```
+
+```lang:CSS
+ol {
+ counter-reset: li; /* li のカウンタを 0 にセット */
+ list-style: none;
+}
+
+li:before {
+ color: #f00;
+ font-weight: bold;
+ counter-increment: li; /* li の数を一つずつ増加 */
+ content: counter(li) ". "; /* 数を表示 */
+}
+```
+
+参考元:[【CSS】counterを使って番号付きリストの『番号』だけ色を変更する方法 | キノめも](http://kinomemo.info/create/1611/)