htmlcsscss-counter

Adding Numbers to ol li via counters (when using display flex) not working

Add numbers to the following list using CSS: Counters. I am trying, but I think I am not applying currently.

#two li {display: flex;}
li::before {counter-increment: all};
<div>
<ol>
  <li>Apple</li>
  <li>Mango</li>
  <li>Oranges</li>
  <li>Peach</li>
  <li>PineApplie</li>
</ol>
</div>

<div>
<ol id="two">
  <li>Apple</li>
  <li>Mango</li>
  <li>Oranges</li>
  <li>Peach</li>
  <li>PineApplie</li>
</ol>
</div>

Please, help. I need same numbering in second-list also, where due to some reason, I have to use display:flex on lis.

Solution

  • you need to reset the counter in body tag body { counter-reset: all; }

    body {
  counter-reset: all;
}
#two li {display: flex;}
#two li::before {
  counter-increment: all;
  content: "list " counter(all) "- ";
}
    <div>
<ol>
  <li>Apple</li>
  <li>Mango</li>
  <li>Oranges</li>
  <li>Peach</li>
  <li>PineApplie</li>
</ol>
</div>

<div>
<ul id="two">
  <li>Apple</li>
  <li>Mango</li>
  <li>Oranges</li>
  <li>Peach</li>
  <li>PineApplie</li>
</ul>
</div>