<ul>
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item<ul>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item<ul>
          <li>List Item</li>
          <li>List Item</li>
          <li>List Item</li>
        </ul>
      </li>
      <li>List Item</li>
    </ul>
  </li>
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
</ul>
ul {
  list-style: none;
}
ul li::before {
  content: "✅";
  display: inline-block;
  margin-right: 0.2rem;
}

ul ul li::before {
  content: "📌";
}
ul ul ul li::before {
  content: "🤷‍♀️";
}

/* 
Newer Syntax:

ul li::marker {
  content: "✅ ";
}
*/

External CSS

  1. https://codepen.io/chriscoyier/pen/GRpqNwX

External JavaScript

This Pen doesn't use any external JavaScript resources.