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

Asked 7/12, 2015 at 19:51 Answered 17/3, 2023 at 9:54

130

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>

Tachymetry answered 7/12, 2015 at 19:51 Comment(0)

219

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>

Propolis answered 7/12, 2015 at 19:52 Comment(3)

I used this and it works in Chrome 65. I was able to wrap each <li> 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. – Whisker 1/5, 2018 at 9: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.) – Danube 16/6, 2019 at 19:46

@Josh: Adam's answer has a solution to the wrapping problem. I've edited it for clarity, up to you to include it. – Danube 16/6, 2019 at 20:3

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:

Vitia answered 7/12, 2015 at 20:10 Comment(8)

This is no different than Josh Crozier's answer, and suffers from the same problem of destroying indentation on wrapping. 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. – Danube 16/6, 2019 at 19:49

@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") – Vitia 16/6, 2019 at 23:3

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? – Danube 17/6, 2019 at 7:7

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 – Vitia 17/6, 2019 at 17:57

You've been on SO for a while. You know that votes are not the best indicator of quality. Also, you haven't answered the core of my argument, but if you don't want to argue, that's fine. – Danube 17/6, 2019 at 20:43

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. – Vitia 17/6, 2019 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. – Vitia 17/6, 2019 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 – Vitia 17/6, 2019 at 21:50

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.

Vernon answered 6/7, 2018 at 10:17 Comment(0)

<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';
   }

Zicarelli answered 13/3, 2020 at 13:59 Comment(3)

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 <li>. – Evanesce 5/8, 2020 at 20:34

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 – Pandean 4/6, 2021 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 – Aquarelle 23/6, 2021 at 9:8

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>

Fairley answered 22/3, 2022 at 10:3 Comment(1)

or this checkmark '✔' – Babiche 29/2 at 22:11

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>

Enticement answered 18/1, 2022 at 23:17 Comment(0)

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: "✓";
}

Jyoti answered 6/8, 2022 at 19:24 Comment(1)

Please, read previous answers before adding yours – Genuflect 8/5, 2023 at 9:7

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

Hannan answered 17/3, 2023 at 9:54 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

jsFiddle

Recommended topics

Hot tags