Checkbox Strike Through on Check v1

Fancy Bricks Layout.json

// Copy the below json code and paste into the bricks structure panel

{"content":[{"id":"iunftu","name":"section","parent":0,"children":["wxicug"],"settings":{}},{"id":"wxicug","name":"container","parent":"iunftu","children":["ajxmwf"],"settings":[]},{"id":"ajxmwf","name":"block","parent":"wxicug","children":["wuttdl","pkyoti"],"settings":{"_rowGap":"var(--space-m)"}},{"id":"wuttdl","name":"block","parent":"ajxmwf","children":["mexovd","gyyhow"],"settings":[]},{"id":"mexovd","name":"heading","parent":"wuttdl","children":[],"settings":{"text":"The Fancier version","tag":"h3"}},{"id":"gyyhow","name":"text","parent":"wuttdl","children":[],"settings":{"text":"<p>Here we use a pseudo element that replaces the line through. This pseudo element starts off with a width of zero but when the check box is checked, it expands to 100% of the label. Of course this could be adjusted so it was a little wider and you could perhaps, move it a little down/up and a slight rotation on it which may make it look a little more  hand written (imperfect).</p>"}},{"id":"pkyoti","name":"form","parent":"ajxmwf","children":[],"settings":{"submitButtonStyle":"primary","successMessage":"Message successfully sent. We will get back to you as soon as possible.","emailSubject":"Contact form request","emailTo":"admin_email","fromName":"Ncodein Demos","emailErrorMessage":"Submission failed. Please reload the page and try to submit the form again.","htmlEmail":true,"mailchimpPendingMessage":"Please check your email to confirm your subscription.","mailchimpErrorMessage":"Sorry, but we could not subscribe you.","sendgridErrorMessage":"Sorry, but we could not subscribe you.","fields":[{"type":"checkbox","label":"Items","id":"durqir","options":"Item 1\nItem 2\nItem 3"}],"_cssCustom":"#brxe-pkyoti label{\n  position: relative;\n}\n\n#brxe-pkyoti{\n  input[type=\"checkbox\"] + label::before{\n    content: '';\n  position: absolute;\n  left: 0;\n  /*right: 0;*/\n  width:0%;\n  top: 50%; \n  transform: translateY(-50%); /* this ensures it is dead center when it comes to absolute positioning */\n  height: 2px; \n  background: red; \n  border-radius: 2px;\n   transition: width 500ms ease-in-out;\n  }\n  /*input[type=\"checkbox\"]:checked + label{\n    text-decoration:line-through;\n  }*/\n  input[type=\"checkbox\"]:checked + label::before{\n    /*right: 0%;*/\n    width:100%;\n  }\n}"},"themeStyles":[]}],"source":"bricksCopiedElements","sourceUrl":"https://demo.ncodein.com","version":"1.9.9","globalClasses":[],"globalElements":[]}

Fancy Style.css

/* This is applied to the form in Bricks */
/* %root% in bricks refers to the item you are editing, in this case the form */

%root% label{
  position: relative;
}

%root%{
  input[type="checkbox"] + label::before{
    content: '';
  position: absolute;
  left: 0;
  /*right: 0;*/
  width:0%;
  top: 50%; 
  transform: translateY(-50%); /* this ensures it is dead center when it comes to absolute positioning */
  height: 2px; 
  background: red; 
  border-radius: 2px;
   transition: width 500ms ease-in-out;
  }
  /*input[type="checkbox"]:checked + label{
    text-decoration:line-through;
  }*/
  input[type="checkbox"]:checked + label::before{
    /*right: 0%;*/
    width:100%;
  }
}

Simple bricks layout.json

// Copy the below json code and paste into the bricks structure panel

{"content":[{"id":"rldkyv","name":"section","parent":0,"children":["batdxf"],"settings":{}},{"id":"batdxf","name":"container","parent":"rldkyv","children":["vfoojo"],"settings":[]},{"id":"vfoojo","name":"block","parent":"batdxf","children":["rjsdwv","cfyqnz"],"settings":{"_rowGap":"var(--space-m)"}},{"id":"rjsdwv","name":"block","parent":"vfoojo","children":["itcthl","vwjsbs"],"settings":[]},{"id":"itcthl","name":"heading","parent":"rjsdwv","children":[],"settings":{"text":"The simple version","tag":"h3"}},{"id":"vwjsbs","name":"text","parent":"rjsdwv","children":[],"settings":{"text":"<p>This version simply adds text-decoration = line-through to the label associated with the relevant checkbox.</p>"}},{"id":"cfyqnz","name":"form","parent":"vfoojo","children":[],"settings":{"submitButtonStyle":"primary","successMessage":"Message successfully sent. We will get back to you as soon as possible.","emailSubject":"Contact form request","emailTo":"admin_email","fromName":"Ncodein Demos","emailErrorMessage":"Submission failed. Please reload the page and try to submit the form again.","htmlEmail":true,"mailchimpPendingMessage":"Please check your email to confirm your subscription.","mailchimpErrorMessage":"Sorry, but we could not subscribe you.","sendgridErrorMessage":"Sorry, but we could not subscribe you.","fields":[{"type":"checkbox","label":"Items","id":"durqir","options":"Item 1\nItem 2\nItem 3"}],"_cssCustom":"\n\n#brxe-cfyqnz{\n  input[type=\"checkbox\"]:checked + label{\n    text-decoration:line-through;\n  }\n}"},"themeStyles":[]}],"source":"bricksCopiedElements","sourceUrl":"https://demo.ncodein.com","version":"1.9.9","globalClasses":[],"globalElements":[]}

Simple Style.css

/* This is applied to the form in Bricks */
/* %root% in bricks refers to the item you are editing, in this case the form */
%root%{
  input[type="checkbox"]:checked + label{
    text-decoration:line-through;
  }
}