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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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

CodePudding user response：

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>