JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sidebar">
  <div class="widget">
    <ul>
      <li>リストアイテム</li>
      <li>リストアイテム</li>
      <li>リストアイテム</li>
    </ul>
  </div>
  <div class="widget widget_text">
    <ul>
      <li>リストアイテム
        <ul>
          <li>サブリスト</li>
          <li>サブリスト</li>
        </ul>
      </li>
      <li>リストアイテム</li>
      <li>リストアイテム</li>
    </ul>
    <ol>
      <li>リストアイテム</li>
      <li>リストアイテム</li>
      <li>リストアイテム</li>
    </ol>
    <ol>
      <li>リストアイテム</li>
      <li>リストアイテム</li>
      <li>リストアイテム</li>
    </ol>
  </div>
</div>

CSS

#sidebar ul,
#sidebar ol {
  list-style: none;
}

.widget_text ul li::before {
  content: "any charactor";
  margin-right: 5px;
  background-color: #444;
  color: #fff;
  padding: 0 5px;
}
.widget_text ul ul li::before {
  content: "any charactor";
  margin-right: 5px;
  background-color: #c44;
  color: #fff;
  padding: 0 5px;
}

.widget_text ol li {
  counter-increment: number;
}
.widget_text ol:nth-of-type(2) li {
  counter-increment: number2;
}
.widget_text ol li::before {
  /*counter-reset: number;*/
  content: counter(number);
  margin-right: 5px;
}
.widget_text ol:nth-of-type(2) li::before {
  content: counter(number2, cjk-ideographic);
  margin-right: 5px;
}