<ul class="default">
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
  <li>Lemon</li>
</ul>
<ul class="attribute">
  <li data-emoji="🍎">Apple</li>
  <li data-emoji="🍌">Banana</li>
  <li data-emoji="🍒">Cherry</li>
  <li data-emoji="🍋">Lemon</li>
</ul>
<ul class="image">
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
  <li>Lemon</li>
</ul>

body {
  padding: 20px;
}
ul {
  list-style: none;
  padding-left: 0.2em;
}
li {
  position: relative;
  padding-left: 0.6em;
  font-size: 30px;
}
ul.default li::before {
  content: "";
  width: 0.2em;
  height: 0.2em;
  background-color: red;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

ul.attribute li::before {
  content: attr(data-emoji);
  font-size: 0.6em;
  position: absolute;
  left: -0.4em;
  top: 50%;
  transform: translateY(-50%);
}

ul.image li::before {
  --size: 0.7em;
  content: "";
  width: var(--size);
  height: var(--size);
  background-image: url(https://heropy.dev/favicon.png);
  background-size: cover;
  position: absolute;
  left: -0.3em;
  top: 50%;
  transform: translateY(-50%);
}