Styling HTML List with CSS

Today I want to teach you a cool trick that may or may not you know. We can use icon or image instead of bullet in unorder list in css. Here is an example of it: This is the HTML part

  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
</ul>

This is the css part

ul {
  list-style-image: url("https://img.icons8.com/ios/12/pen.png");
}

we can change the color of bullets without changing the list item. here is a demo of it: CSS part

::marker{
  color:red;
  font-size:20px;
}

see you soon.