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

Question

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>

Josh Crozier · Accepted Answer · 2019-06-17T01:01:50.570

213

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>

edited Jun 17 '19 at 01:01

answered Dec 07 '15 at 19:52

Josh Crozier

233,099
56
391
304

1

I used this and it works in Chrome 65. I was able to wrap each
normally using a 1px solid border, float left and margin right on the ul li:before - you can set border color to the background of your element.

ymasood

May 01 '18 at 09:59

Thanks for the solution! I've added a note that indentation is lost on wrapping. (Apologies for editing the post, but it was better at illustrating the issue than just leaving a comment, and hopefully we can find a way to deal with that.) – Dan Dascalescu Jun 16 '19 at 19:46

@Josh: [Adam's answer](https://stackoverflow.com/questions/34141950/how-to-use-tick-checkmark-symbol-instead-of-bullets-in-unordered-list/51208163#51208163) has a solution to the wrapping problem. I've edited it for clarity, up to you to include it. – Dan Dascalescu Jun 16 '19 at 20:03

score 44 · Answer 2 · edited May 23 '17 at 11:47

44

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:

edited May 23 '17 at 11:47

Community

1
1

answered Dec 07 '15 at 20:10

Michael Benjamin

346,931
104
581
701

1

This is no different than Josh Crozier's answer, and suffers from the same problem of [destroying indentation on wrapping](https://stackoverflow.com/questions/34141950/how-to-use-tick-checkmark-symbol-instead-of-bullets-in-unordered-list/34141979#34141979). Also, the last character doesn't show up in the fiddle either on Chromium/Ubuntu, but that's besides the point anyway - Josh's answer is the gist of the solution. What checkmark characters to use is a design choice. – Dan Dascalescu Jun 16 '19 at 19:49
2

@DanDascalescu, this answer expands on Josh Crozier's solution by providing checkmark options that some people may not know about. That's valuable information. The fact that they are "design choices" doesn't make this answer less useful. Your downvote is unwarranted in my view as: (1) the answer has been useful to many people (and has nearly 30 upvotes), (2) the answer doesn't pretend to be anything other than style choices, and (3) I wasn't attempting to tackle any other problems (which, as you say, are "besides the point anyway") – Michael Benjamin Jun 16 '19 at 23:03
1

The checkmark choices I see, "\2713" and "\2714", are raw Unicode code points. I can't see what they look like. If the answer wants to give style choices, it can include some actual checkmarks: ✓, ✔, ☑, ✅. What checkmark to use, is not an interesting problem. How to use checkmarks is. I see it as, "How do I paint a boat that's currently in the water", vs. "What shades of blue can I paint it". Does that make sense? – Dan Dascalescu Jun 17 '19 at 07:07
You have the right to view this answer from whatever perspective you wish. I'm not going to argue with your opinion. The fact is, however, that the vast majority of people visiting this post find this answer useful. I'll just leave it at that. Thanks for the feedback. @DanDascalescu – Michael Benjamin Jun 17 '19 at 17:57
You've been on SO for a while. You know that [votes](https://meta.stackoverflow.com/questions/374745/many-upvotes-to-a-blatantly-incorrect-answer-can-we-solve-this-situation) are not [the best indicator of quality](https://meta.stackoverflow.com/questions/272570/how-to-deal-with-hugely-upvoted-bad-and-outdated-answers). Also, you haven't answered the core of my argument, but if you don't want to argue, that's fine. – Dan Dascalescu Jun 17 '19 at 20:43
2

People upvote for many different reasons. People upvote for reasons different than yours. You come along an disagree with the content of this answer. You're not saying the answer is wrong or outdated (like in the links you referenced), you just don't like it. That's fine with me. You're entitled to your opinion. – Michael Benjamin Jun 17 '19 at 21:41
But your argument is weak and unpersuasive because it's premised mostly on an assumption that you're smarter and more in tune with quality and value than the people who found this answer useful. I don't agree with that. Plus, with your link references, you're suggesting that this is a bad answer with upvotes anyway. I see no evidence to back that up. And I have no track record that backs that up. – Michael Benjamin Jun 17 '19 at 21:48
I accept your opinion. I just don't agree. Your continuing justifications for your decision aren't strengthening your case. Quite the contrary. So let's just move on. @DanDascalescu – Michael Benjamin Jun 17 '19 at 21:50

Adam Orłowski · Answer 3 · 2019-12-03T12:01:38.797

As an addition to the solution:

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

You can use any SVG icon as the content, such as the Font Aswesome.

ul {
  list-style: none;
  padding-left: 0;
}
li {
  position: relative;
  padding-left: 1.5em;  /* space to preserve indentation on wrap */
}
li:before {
  content: '';  /* placeholder for the SVG */
  position: absolute;
  left: 0;  /* place the SVG at the start of the padding */
  width: 1em;
  height: 1em;
  background: url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='utf-8'?><svg width='18' height='18' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'><path d='M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z'/></svg>") no-repeat;
}

<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>This is my text, it's pretty long so it needs to wrap. Note that wrapping preserves the indentation that bullets had!</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

Note: To solve the wrapping problem that other answers had:

we reserve 1.5m ems of space at the left of each <li>
then position the SVG at the start of that space (position: absolute; left: 0)

Here are more Font Awesome black icons.

Check this CODEPEN to see how you can add colors and change their size.

score 31 · Answer 4 · answered Mar 13 '20 at 13:59

31

<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 this simple css style

ul {
     list-style-type: '\2713';
   }

answered Mar 13 '20 at 13:59

Hitendra Singh Shekhawat

509
8
10

2

Adam's answer touched on the wrapping problem, but it took tons of extra code... this just works. The spacing was a touch off for me, so I just ended up adding an extra \1\1 at the end of it to space the checkmark away from the
.

Jaden Baptista

Aug 05 '20 at 20:34

1

I've used ul { list-style-type: '\2713 '; } (note the spaces at the end of the string) which works in Chrome, Edge and Firefox. Not checked it in Opera – Liam Jun 04 '21 at 15:44

This should be the selected answer as it does not break the lists' indents... Of course you can use any unicode code – Ronen Rabinovici Jun 23 '21 at 09:08

tomyam · Answer 5 · 2022-10-29T15:02:20.747

7

You could also use ::marker pseudo element to set the marker of your list items.

Its list of allowed CSS properties is somewhat limited, though.

Browser support as of October 2022: 94% (no IE support)

ul li::marker {
  content: '✓';
  color: green;
}

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

edited Oct 29 '22 at 15:02

answered Mar 22 '22 at 10:03

tomyam

369
4
9

score 1 · Answer 6 · answered Jan 18 '22 at 23:17

Just want to add that for anyone stuck in a unique situation where inline css is necessary (such as within a mass email context where email clients still need inline css) you can use a list-style-type: none and combine it with the character code for your bullet of choice (checkmark used below) like so:

<ul style="list-style-type: none;">
  <li>&#10004; List Item 1</li>
  <li>&#10004; List Item 2</li>
  <li>&#10004; List Item 3</li>
  <li>&#10004; List Item 4</li>
</ul>

Auguste Tom · Answer 7 · 2022-08-06T19:25:05.037

1

As of 2022, I found the easiest one to use. And it allows specifying color of the marker. CSS below:

li::marker {
  color: red;
  content: "✓";
}

edited Aug 06 '22 at 19:25

answered Aug 06 '22 at 19:24

Auguste Tom

11
3

Please, read previous answers before adding yours – Daniel Abril May 08 '23 at 09:07

score 0 · Answer 8 · answered Mar 17 '23 at 09:54

use a little triky:

li::before {
  content: "";
  position: absolute;
  border-color: #009933;
  border-style: solid;
  border-width: 0 0.3em 0.25em 0;
  height: 1em;
  top: 1.3em;
  left: 0.6em;
  margin-top: -1em;
  transform: rotate(45deg);
  width: 0.5em;
}

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

8 Answers8

jsFiddle

Linked