How to use tick / checkmark symbol (✓) instead of bullets in unordered list?

css html special-characters

Stack-overflow-hero · Dec 7, 2015 · Viewed 156.3k times · Source

I have a list where I want to add tick symbol before list text. Is there any CSS that can help me to apply this way?

✓ this is my text
✓ this is my text
✓ this is my text
✓ this is my text
✓ this is my text
✓ this is my text

Note: I want this in this type of HTML code

Answer

You can use a pseudo-element to insert that character before each list item:

ul {
  list-style: none;
}

ul li:before {
  content: '✓';
}

<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>