[css] How to draw a checkmark / tick using CSS?

How to draw the tick symbol using CSS? The symbols I find using Unicode isn't aesthetically-pleasing.

EDIT Icon fonts are a great suggestion. I was looking for something like this.

Also, using the awesome font, you can use the following tag. Simple and beautiful

With the possibility of changing the size and color and other features in CSS

See result here

Here is another CSS solution. its take less line of code.

ul li:before
{content:'\2713';
  display:inline-block;
  color:red;
  padding:0 6px 0 0;
  }
ul li{list-style-type:none;font-size:1em;}

<ul>
    <li>test1</li>
    <li>test</li>
</ul>

Here is the Demo link http://jsbin.com/keliguqi/1/

This is simple css for Sign Mark.

ul li:after{opacity: 1;content: '\2713';right: 20px;position: absolute;font-size: 20px;font-weight: bold;}

I suggest to use a tick symbol not draw it. Or use webfonts which are free for example: fontello[dot]com You can than replace the tick symbol with a web font glyph.

Lists

ul {padding: 0;}
li {list-style: none}
li:before {
  display:inline-block;
  vertical-align: top;
  line-height: 1em;
  width: 1em;
  height:1em;
  margin-right: 0.3em;
  text-align: center;
  content: '?';
  color: #999;
}

See here: http://jsfiddle.net/hpmW7/3/

Checkboxes

You even have web fonts with tick symbol glyphs and CSS 3 animations. For IE8 you would need to apply a polyfill since it does not understand :checked.

input[type="checkbox"] {
  clip: rect(1px, 1px, 1px, 1px);
  left: -9999px;
  position: absolute !important;
}
label:before,
input[type="checkbox"]:checked + label:before {
  content:'';
  display:inline-block;
  vertical-align: top;
  line-height: 1em;
  border: 1px solid #999;
  border-radius: 0.3em;
  width: 1em;
  height:1em;
  margin-right: 0.3em;
  text-align: center;
}
input[type="checkbox"]:checked + label:before {
  content: '?';
  color: green;
}

See the JS fiddle: http://jsfiddle.net/VzvFE/37

i like this way because you don't need to create two components just one.

.checkmark:after {
    opacity: 1;
    height: 4em;
    width: 2em;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    border-right: 2px solid #5cb85c;
    border-top: 2px solid #5cb85c;
    content: '';
    left: 2em;
    top: 4em;
    position: absolute;
}

Animation from Scott Galloway Pen

You might want to try fontawesome.io

It has great collection of icons. For you <i class="fa fa-check" aria-hidden="true"></i> should work. There are many check icons in this too. Hope it helps.

You can draw two rectangles and place them next to each other. And then rotate by 45 degrees. Modify the width/height/top/left parameters for any variation.

DEMO 1

DEMO 2 (With circle)

HTML

<span class="checkmark">
    <div class="checkmark_stem"></div>
    <div class="checkmark_kick"></div>
</span>

CSS

.checkmark {
    display:inline-block;
    width: 22px;
    height:22px;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
}

.checkmark_stem {
    position: absolute;
    width:3px;
    height:9px;
    background-color:#ccc;
    left:11px;
    top:6px;
}

.checkmark_kick {
    position: absolute;
    width:3px;
    height:3px;
    background-color:#ccc;
    left:8px;
    top:12px;
}

After some changing to above Henry's answer, I got a tick with in a circle, I came here looking for that, so adding my code here.

.snackbar_circle {
  background-color: #f0f0f0;
  border-radius: 13px;
  padding: 0 5px;
}

.checkmark {
  font-family: arial;
  font-weight: bold;
  -ms-transform: scaleX(-1) rotate(-35deg);
  -webkit-transform: scaleX(-1) rotate(-35deg);
  transform: scaleX(-1) rotate(-35deg);
  color: #63BA3D;
  display: inline-block;
}

<span class="snackbar_circle">
   <span class="checkmark">L</span>
</span>

Try this // html example

<span>&#10003;</span>

// css example

span {
  content: "\2713";
}

An additional solution, for when you only have one of the :before / :after psuedo-elements available, is described here: :after-Checkbox using borders

It basically uses the border-bottom and border-right properties to create the checkbox, and then rotates the mirrored L using transform

Example

li {_x000D_
  position: relative; /* necessary for positioning the :after */_x000D_
}_x000D_
_x000D_
li.done {_x000D_
  list-style: none; /* remove normal bullet for done items */_x000D_
}_x000D_
_x000D_
li.done:after {_x000D_
  content: "";_x000D_
  background-color: transparent;_x000D_
  _x000D_
  /* position the checkbox */_x000D_
  position: absolute;_x000D_
  left: -16px;_x000D_
  top: 0px;_x000D_
_x000D_
  /* setting the checkbox */_x000D_
    /* short arm */_x000D_
  width: 5px;_x000D_
  border-bottom: 3px solid #4D7C2A;_x000D_
    /* long arm */_x000D_
  height: 11px;_x000D_
  border-right: 3px solid #4D7C2A;_x000D_
  _x000D_
  /* rotate the mirrored L to make it a checkbox */_x000D_
  transform: rotate(45deg);_x000D_
    -o-transform: rotate(45deg);_x000D_
    -ms-transform: rotate(45deg);_x000D_
    -webkit-transform: rotate(45deg);_x000D_
}

To do:_x000D_
<ul>_x000D_
  <li class="done">Great stuff</li>_x000D_
  <li class="done">Easy stuff</li>_x000D_
  <li>Difficult stuff</li>_x000D_
</ul>

Do some transforms with the letter L

.checkmark {_x000D_
  font-family: arial;_x000D_
  -ms-transform: scaleX(-1) rotate(-35deg); /* IE 9 */_x000D_
  -webkit-transform: scaleX(-1) rotate(-35deg); /* Chrome, Safari, Opera */_x000D_
  transform: scaleX(-1) rotate(-35deg);_x000D_
}

<div class="checkmark">L</div>

I've used something similar to BM2ilabs's answer in the past to style the tick in checkboxes. This technique uses only a single pseudo element so it preserves the semantic HTML and there is no reason for additional HTML elements.

label {_x000D_
  cursor: pointer;_x000D_
}_x000D_
_x000D_
input[type="checkbox"] {_x000D_
  position: relative;_x000D_
  top: 2px;_x000D_
  box-sizing: content-box;_x000D_
  width: 14px;_x000D_
  height: 14px;_x000D_
  margin: 0 5px 0 0;_x000D_
  cursor: pointer;_x000D_
  -webkit-appearance: none;_x000D_
  border-radius: 2px;_x000D_
  background-color: #fff;_x000D_
  border: 1px solid #b7b7b7;_x000D_
}_x000D_
_x000D_
input[type="checkbox"]:before {_x000D_
  content: '';_x000D_
  display: block;_x000D_
}_x000D_
_x000D_
input[type="checkbox"]:checked:before {_x000D_
  width: 4px;_x000D_
  height: 9px;_x000D_
  margin: 0px 4px;_x000D_
  border-bottom: 2px solid #115c80;_x000D_
  border-right: 2px solid #115c80;_x000D_
  transform: rotate(45deg);_x000D_
}

<label>_x000D_
  <input type="checkbox" name="check-1" value="Label">Label_x000D_
</label>

only css, quite simple I find it:

.checkmark {_x000D_
      display: inline-block;_x000D_
      transform: rotate(45deg);_x000D_
      height: 25px;_x000D_
      width: 12px;_x000D_
      margin-left: 60%; _x000D_
      border-bottom: 7px solid #78b13f;_x000D_
      border-right: 7px solid #78b13f;_x000D_
    }

<div class="checkmark"></div>

li:before {
    content: '';
    height: 5px;
    background-color: green;
    position: relative;
    display: block;
    top: 50%;
    left: 50%;
    width: 9px;
    margin-left: -15px;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
li:after {
    content: '';
    height: 5px;
    background-color: green;
    position: relative;
    display: block;
    top: 50%;
    left: 50%;
    width: 20px;
    margin-left: -11px;
    margin-top: -6px;
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}