Custom List Style with Pseudo-Elements Before - CSS

Create customize bullet points in element <li> via pseudo-elements.

DEMO

• Creeping Death (Ride The Lightning, 1984)
• Master Of Puppets (Master Of Puppets, 1986)
• One (…And Justice For All, 1988)
• For Whom The Bell Tolls (Ride The Lightning, 1984)
• Battery (Master Of Puppets, 1986)

HTML

<ul>
  <li class="checked">Creeping Death (Ride The Lightning, 1984)</li>
  <li>Master Of Puppets (Master Of Puppets, 1986)</li>
  <li>One (…And Justice For All, 1988)</li>
  <li class="checked">For Whom The Bell Tolls (Ride The Lightning, 1984)</li>
  <li class="checked">Battery (Master Of Puppets, 1986)</li>
</ul>

CSS

ul {
  list-style: none;
}
ul li::before {
  content: '\2795';
  margin-right: 0.3em;
}
ul li.checked::before {
  content: '\2705';
}