CODEWITHSUNDEEP
csshtml-lists
hobbsie
hobbsie

Reputation: 43

How can I style a css order list to display 1-2, 3-4, 5-6, 7-8 etc

I want to output like so:

1-2 number one
3-4 number two
5-6 number three

This is my HTML-CSS code which I have tried

ol {
  list-style    : none;   /* Remove default numbering */
  counter-reset : item 0; /* Start counter at 0 */
  }
li {
  display           : block;
  counter-increment : item 2; /* Increment by 2 for each item */
}
li:before {
  /* Display as '1-2', '3-4', etc. */
  content           : counter(item) "-" counter(item, decimal) " "; 
  font-weight       : bold;
  counter-increment : item; /* Increment again to get the second number */
}
<ol class="custom-list">
  <li>number one</li>
  <li>number two</li>
  <li>number three</li>
</ol>

Which isn't producing the desired results... :/

Upvotes: 2

Views: 35

Answers (1)

Mister Jojo
Mister Jojo

Reputation: 22365

Simply use 2 counters:

ol {
  list-style    : none;
  counter-reset : c_1 -1 c_2 0; 
  }
li:before {
  font-weight       : bold;
  counter-increment : c_1 2 c_2 2; 
  content           : counter(c_1) '-' counter(c_2) ' '; 
  }
<ol class="custom-list">
  <li>number one</li>
  <li>number two</li>
  <li>number three</li>
</ol>

Upvotes: 2

Related Questions