JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li><p>Bender</p></li>
  <li><p>Fry</p></li>
  <li><p>Leela</p></li>
</ul>

CSS

ul { margin: 10px; }
li { position: relative; }

p:before {
  background: #bb3333;
  content: ".";
  display: inline-block;
  height: 10px;
  margin: 0 5px 0 0;
  text-indent: -10000px;
  width: 10px;
}

li:nth-child(2) p:before { background: #33bb33; }
li:nth-child(3) p:before { background: #3333bb; }