Css - How To Use Tick / Checkmark Symbol (✓) Instead Of Bullets In ...

1. 1. Home
   2. Questions
   3. Tags
   4. Users
   5. Companies
   6. Labs
   7. Jobs
   8. Discussions
   9. Collectives

   10. Communities for your favorite technologies. Explore all Collectives

2. Teams

   Ask questions, find answers and collaborate at work with Stack Overflow for Teams.

   Try Teams for free Explore Teams
3. Teams

4. Ask questions, find answers and collaborate at work with Stack Overflow for Teams. Explore Teams

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

Get early access and see previews of new features.

Learn more about Labs How to use tick / checkmark symbol (✓) instead of bullets in unordered list? Ask Question Asked 9 years ago Modified 1 year, 9 months ago Viewed 326k times 137

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>

• css
• html
• special-characters

Share Improve this question Follow edited Jul 26, 2016 at 17:45 Michael Benjamin 370k110110 gold badges609609 silver badges725725 bronze badges asked Dec 7, 2015 at 19:51 Stack-overflow-heroStack-overflow-hero 1,49122 gold badges1010 silver badges77 bronze badges Add a comment |

8 Answers 8

Sorted by: Reset to default Highest score (default) Trending (recent votes count more) Date modified (newest first) Date created (oldest first) 222

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>

Share Improve this answer Follow edited Jun 17, 2019 at 1:01 answered Dec 7, 2015 at 19:52 Josh CrozierJosh Crozier 241k5656 gold badges400400 silver badges313313 bronze badges 3

• 1 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. – ymasood Commented May 1, 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.) – Dan Dascalescu Commented Jun 16, 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. – Dan Dascalescu Commented Jun 16, 2019 at 20:03

Add a comment | 46

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

Share Improve this answer Follow edited May 23, 2017 at 11:47 CommunityBot 111 silver badge answered Dec 7, 2015 at 20:10 Michael BenjaminMichael Benjamin 370k110110 gold badges609609 silver badges725725 bronze badges 8

• 1 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. – Dan Dascalescu Commented Jun 16, 2019 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 Commented Jun 16, 2019 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 Commented Jun 17, 2019 at 7: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 Commented Jun 17, 2019 at 17:57
• 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 Commented Jun 17, 2019 at 21:41

| Show 3 more comments 40

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.

Share Improve this answer Follow edited Dec 3, 2019 at 12:01 answered Jul 6, 2018 at 10:17 Adam OrłowskiAdam Orłowski 4,4442525 silver badges3434 bronze badges 0 Add a comment | 37 <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'; } Share Improve this answer Follow answered Mar 13, 2020 at 13:59 Hitendra Singh ShekhawatHitendra Singh Shekhawat 56988 silver badges1010 bronze badges 3

• 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 <li>. – Jaden Baptista Commented Aug 5, 2020 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 Commented Jun 4, 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 – Ronen Rabinovici Commented Jun 23, 2021 at 9:08

Add a comment | 9

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>

Share Improve this answer Follow edited Oct 29, 2022 at 15:02 answered Mar 22, 2022 at 10:03 tomyamtomyam 38944 silver badges99 bronze badges 1

• or this checkmark '✔' – DarckBlezzer Commented Feb 29 at 22:11

Add a comment | 1

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> Share Improve this answer Follow answered Jan 18, 2022 at 23:17 Joel YoungbergJoel Youngberg 53611 gold badge99 silver badges1111 bronze badges Add a comment | 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: "✓"; } Share Improve this answer Follow edited Aug 6, 2022 at 19:25 answered Aug 6, 2022 at 19:24 AugusteAuguste 1122 bronze badges 1

• Please, read previous answers before adding yours – Daniel Abril Commented May 8, 2023 at 9:07

Add a comment | 0

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; } Share Improve this answer Follow answered Mar 17, 2023 at 9:54 TiglathPileserTiglathPileser 5311 silver badge88 bronze badges Add a comment |

Your Answer

Reminder: Answers generated by artificial intelligence tools are not allowed on Stack Overflow. Learn more

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.
• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Draft saved Draft discarded

Sign up or log in

Sign up using Google Sign up using Email and Password Submit

Post as a guest

Name Email

Required, but never shown

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged

• css
• html
• special-characters

or ask your own question.

• The Overflow Blog
• Legal advice from an AI is illegal
• Why do developers love clean code but hate writing documentation?
• Featured on Meta
• The December 2024 Community Asks Sprint has been moved to March 2025 (and...
• Stack Overflow Jobs is expanding to more countries

Visit chat

Linked

22 What is the effect of content: "\0020"; property? 1 Green Check mark not getting displayed properly in css 1 Define custom list-style-type in CSS 0 Easy way to customize the bullets for my list element in AnguIarJS

Related

12 How to make a HTML list appear without the bullets signs using CSS only? 133 Unicode character as bullet for list-item in CSS 5 CSS - use character for list marker 183 Custom bullet symbol for <li> elements in <ul> that is a regular character, and not an image 3 HTML special character for list type circle 2 Replacing bullets of HTML lists with any characters 4 How to use an asterisk in list items instead of a bullet 0 Replace list bullet by custom symbol (right aligned) 1 Change bullet icon to double quote 1 Replace bullet points with emojis (or other Unicode characters) (But Don't change nested bullets)

Hot Network Questions

• What flight company is responsible for transferring the baggage during connection?
• How to make i3 aware of altered PATH configuration set in .bashrc
• What explains the definition of true and false in untyped lambda calculus?
• What keyboard shortcuts disable the keyboard?
• "Immutable backups": an important protection against ransomware or yet another marketing product?
• "I am a native Londoner." VS "I am an original Londoner."
• Should parameter names describe their object type?
• What does negative or minus symbol denote in a component datasheet?
• Why am I not seeing continuity between MC cable sheathing and ground wires?
• How to set the limits of a definite integral by substitution?
• Is "Bich" really Latin for "generosity"?
• What are these circles called and how big are they?
• Why is Young's modulus represented as a single value in DFT calculations?
• What are "rent and waistline parties"?
• Can a ship like Starship roll during re-entry?
• Can doctors administer an experimental treatment without patient consent in an emergency?
• Cannot get zsh to resemble bash_profile with xterm Linux colors for MacOS
• A prime number in a sequence with number 1001
• Was Basilides's claim about crucifixion ever refuted?
• Why does the Apple II have the VERIFY command in DOS 3.3 and ProDOS?
• What would be the legal status of Jean Valjean and Cosette in the present day?
• A guess about sudoku-like game, proof or a counterexample
• If you are working remotely as a contractor, can you be allowed to applying as a business vistor to Australia?
• How to calculate the double sine function via Sage or Pari/GP to high precision?

more hot questions Question feed Subscribe to RSS Question feed

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

lang-html