How to Create a Checkmark / Tick with CSS

Published on October 11, 2019

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 :

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


This is a
tick mark

Download Codes

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


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


#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).

Related Tutorials
How to Create a Triangle Using CSS clip-path
How to Create a Comment Box with a Containing Text Using CSS
Custom Radio Buttons with CSS appearance Property
Creating Pie Charts with CSS
Loading Comments