JSFiddle - React, Tailwind, and code Playground

by Slico

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <ul>
    <li>My list item with ::after selector</li>
    <li>My list item with ::after selector</li>
    <li>My list item with ::after selector</li>
    <li>My list item with ::after selector</li>
    <li>My list item with ::after selector</li>
  </ul>
</body>
</html>

CSS

ul{
  list-style: none; /* remove the default list bullets */
}

ul li{
  position: relative; /* As we are going to use "absolute" position on the ::after, we need this relative to position the image */
}

ul li::after{
    content: ""; /* mandatory (almost always), if this line doesn't exits it will not show the element "after" */
    width: 10px;
    height: 10px;
    position: absolute;
    left: -13px;
    top: 4px;
    background-image: url(https://i.pinimg.com/originals/9c/65/a9/9c65a92632246a35c6a116e19a572a91.jpg);
    background-size: 10px 10px;
}