JSFiddle - React, Tailwind, and code Playground

by cj1406942109

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="ISO-8859-2">
    <title>Document</title>
  </head>

  <body>
    <div class="ele">
      <ul>
        <li>Apple</li>
        <li>Banana</li>
        <li>Orange</li>
      </ul>
    </div>
  </body>

</html>

CSS

.ele {
  width: 200px;
  height: 100px;
  background: #eee;
  counter-reset: fruit;  /* 重置计数器成0 */
}

.ele li::before {
  counter-increment: fruit;  /* 增加计数器值 */
  content: "Fruit" counter(fruit) ": ";  /* 显示计数器 */
}