CSS Check List

Code Example

 <style>
  .checklist {
   position: relative;}

  .checklist h2 {
   color: #f3f3f3;
   font-size: 25px;
   padding: 10px 0;
   margin-left: 0;
   display: inline-block;
   border-bottom: 4px solid #f3f3f3;}

  .checklist label {
   position: relative;
   display: block;
   margin: 40px 0;
   color: #fff;
   font-size: 24px;
   cursor: pointer;}

  .checklist input[type="checkbox"] {
   -webkit-appearance: none;}

  .checklist i {
   position: absolute;
   top: 2px;
   display: inline-block;
   width: 25px;
   height: 25px;
   border: 2px solid #fff;}

  .checklist input[type="checkbox"]:checked ~ i {
   top: 1px;
   height: 15px;
   width: 25px;
   border-top: none;
   border-right: none;
   transform: rotate(-45deg);}

  .checklist span {
   position: relative;
   left: 40px;
   transition: 0.5s;}

  .checklist span:before {
   content: '';
   position: absolute;
   top: 50%;
   left: 0;
   width: 100%;
   height: 1px;
   background: #fff;
   transform: translateY(-50%) scaleX(0);
   transform-origin: left;
   transition: transform 0.5s;}

  .checklist input[type="checkbox"]:checked ~ span:before {
   transform: translateY(-50%) scaleX(1);
   transform-origin: right;
   transition: transform 0.5s;}

  .checklist input[type="checkbox"]:checked ~ span {
   color: #154e6b;}
 </style>