csshtmlspecial-characters

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


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

<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>


Solution

  • 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>