<form class="form" action="">
   <div class="wrapper">
      <div class="form__line">
         <label for="shark" class="form__title-checkbox">Сделал селфи c акулой
        <input class="form__checkbox" type="checkbox" id="shark"
                        name="achievement">
          <span class="form__icon-checkbox"></span>
          </label>
      </div>
     
      <div class="form__line">
        <label for="model" class="form__title-checkbox"> Сделал селфи с моделью
        <input class="form__checkbox" type="checkbox" id="model" name="achievement">
          <span class="form__icon-checkbox"></span>
        </label>
      </div>
                   
    </div>
  </form>
.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.form__line {
  display: flex;
  align-items: center;
}

.form__checkbox {
  display: none;
}



    .form__checkbox:checked+.form__icon-checkbox:before {
      opacity: 1;
    }
  
  .form__icon-checkbox {
    position: relative;
    display: block;
    float: left;
    width: 39px;
    height: 39px;
    background-color: #fff;
    border: 2px solid #e5e5e5;
    margin-top: -4px;
    }


.form__icon-checkbox::before {
      content: "";
      position: absolute;
      display: block;
      top: 50%;
      left: 25%;
      width: 7px;
      height: 18px;
      border: solid #d22856;
      border-width: 0 3px 3px 0;
      transform: rotate(45deg) translate(-50%, -50%);
      opacity: 0;
      transition: .3s cubic-bezier(0.51, 0.38, 0.67, 0.06);
    }
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.