Created
July 30, 2018 02:57
-
-
Save brandondurham/5e127344f3fea6be5f78442966837879 to your computer and use it in GitHub Desktop.
CSS: List using a counter that starts with “0” and uses “decimal-leading-zero”
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* CSS */ | |
.Chapters { | |
column-count: 2; | |
counter-reset: toc -1; | |
} | |
.Chapter { | |
counter-increment: toc; | |
list-style-type: none; | |
} | |
.Chapter::before { | |
content: counter(toc, decimal-leading-zero) "."; | |
} | |
/* HTML */ | |
<ol class="Chapters"> | |
<li class="Chapter">Prologue</li> | |
<li class="Chapter">Chapter 1</li> | |
<li class="Chapter">Chapter 2</li> | |
<li class="Chapter">Chapter 3</li> | |
<li class="Chapter">Chapter 4</li> | |
<li class="Chapter">Chapter 5</li> | |
<li class="Chapter">Chapter 6</li> | |
<li class="Chapter">Chapter 7</li> | |
<li class="Chapter">Chapter 8</li> | |
<li class="Chapter">Chapter 9</li> | |
<li class="Chapter">Chapter 10</li> | |
<li class="Chapter">Chapter 11</li> | |
<li class="Chapter">Chapter 12</li> | |
<li class="Chapter">Chapter 13</li> | |
<li class="Chapter">Chapter 14</li> | |
<li class="Chapter">Chapter 15</li> | |
<li class="Chapter">Chapter 16</li> | |
<li class="Chapter">Chapter 17</li> | |
<li class="Chapter">Chapter 18</li> | |
</ol> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment