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>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>Here are three different checkmark styles you can use:
ul:first-child li:before { content:"\2713\0020"; } /* OR */
ul:nth-child(2) li:before { content:"\2714\0020"; } /* OR */
ul:last-child li:before { content:"\2611\0020"; }
ul { list-style-type: none; }<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>
<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>
<ul><!-- not working on Stack snippet; check fiddle demo -->
<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>jsFiddle
References:
- What is the effect of content: "\0020"; property?
- http://nealchester.com/special-characters/#checkmarks