[Styled checkbox] #scss

_checkbox.scss

.styled-checkbox {

  input[type="checkbox"] {
    display: none;
    visibility: hidden;
    opacity: 0;
  }

  &__label-content {

    position: relative;
    display: inline-block;
    
    padding-left: 27px;

    font-family: Pragmatica;
    font-size: rem(14px);
    font-weight: normal;
    letter-spacing: rem(0.28px);
    color: $color-black;
  
    &::before,
    &::after {
        position: absolute;
        content: "";
        
        display: inline-block;
    }
  
    &::before{

        height: rem(16px);
        width: rem(16px);
        
        border: 1px solid #cccccc;
        left: 0px;
        
        top: 3px;
        
        opacity: 0.7;
        
      }
      
      &::after {
        
        height: 5px;
        width: 9px;
        
        border-left: 2px solid;
        border-bottom: 2px solid;
        
        transform: rotate(-45deg);
        
        left: 4px;
        top: 7px;
      }
      
      
    }
    
    input[type="checkbox"] + &__label-content::after {
      content: none;
    }
    
    input[type="checkbox"]:checked + &__label-content::after {
      content: "";
    }
    
    input[type="checkbox"]:focus + &__label-content::before {
      outline: rgb(59, 153, 252) auto 5px;
    }
    
    input[type="checkbox"]:checked + &__label-content::before {
      opacity: 1;
      
      border: 1px solid $color-black;
    }
    
}

checkbox.html

                    <div class="styled-checkbox">
                      <input type="checkbox" 
                              class="styled-checkbox__checkbox" 
                              name="testCheckbox"
                              id="testCheckbox">
                      <label class="styled-checkbox__label-content" 
                              for="testCheckbox">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore <a href="#">magna aliqua</a>.</label>
                    </div>