How to Create a Checkmark / Tick with CSS

Use-Cases of this Tutorial

Create a checkmark / tick mark icon with pure CSS.

A checkmark icon can be created with CSS by following these steps :

Taking a container element, and using its ::before and ::after pseudo-elements to create two straight lines
Rotate both pseudo-elements to make the element look like a checkmark

Demo

This is a

tick mark

Creating the Checkmark

A checkbox is basically a combination of two straight lines. We take a container element that would hold these two lines. Also instead of using new inner elements to create lines, we use the container's ::before and ::after pseudo-elements.
```
<div id="tick-mark"></div>
```
The ::before and ::after pseudo-elements are then rotated by their left-bottom corners to create a tick mark.

HTML & CSS Involved

HTML :

<div id="tick-mark"></div>

CSS :

#tick-mark {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 30px;
}

#tick-mark::before {
    position: absolute;
    left: 0;
    top: 50%;
    height: 50%;
    width: 3px;
    background-color: #336699;
    content: "";
    transform: translateX(10px) rotate(-45deg);
    transform-origin: left bottom;
}

#tick-mark::after {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background-color: #336699;
    content: "";
    transform: translateX(10px) rotate(-45deg);
    transform-origin: left bottom;
}

Both pseudo-elements are rotated by their left-bottom corners using the transform-origin property. If we were to rotate them by the default center position, we would not get the desired effect.

Why is translation applied ? When the pseudo-elements are rotated, they overflow the container's bounding box. To negate this overflow we translate them by a definite amount. This will be useful in cases where we need the checkmark to flow inline along with some text. But unfortunately the translation amount needs to be calculated beforehand depending on the size of the container (Please leave a comment if you manage to find a solution for this).

Why is transform not applied on the main container ? We could have applied transformation on the main container element instead of the two pseudo-elements, but the container would have been rotated outside of its normal position. This may have caused the neighbouring content to break (however transformation can be applied on the main container too depending on the use-case).