::before not affected my width and height [duplicate]

This question already has an answer here:

• Can I use the :after pseudo-element on an input field? 14 answers

I am currently making a Pricing Template for a client and it involves using check boxes, but I hate the look of the default ones, so I am styling them myself. I have never styled check boxes before but this is how I am attempting to. The codepen is here. My what isn't working starts on line 101 in the HTML and 129 of the CSS. Also I am using SCSS.

I am using ::before to style them and I set the check boxes to have a max-height of 0. The problem is that when I set a width and height for it, it doesn't affect it at all.

Here is the basic HTML:

  <div class="cellBottom cell alaCart">
    <section>
      <p><input type="checkbox" />Lorem ipsum</p>
      <p><input type="checkbox" />Lorem ipsum</p>
      <p><input type="checkbox" />Lorem ipsum</p>
      <p><input type="checkbox" />Lorem ipsum</p>
      <p><input type="checkbox" />Lorem ipsum</p>
      <p><input type="checkbox" />Lorem ipsum</p>
      <p><input type="checkbox" />Lorem ipsum</p>
      <p><input type="checkbox" />Lorem ipsum</p>
      <p><input type="checkbox" />Lorem ipsum</p>
      <p><input type="checkbox" />Lorem ipsum</p>
      <p><input type="checkbox" />Lorem ipsum</p>
    </section>
  </div>

And the CSS:

    section p input[type="checkbox"] {
      max-height: 0px;
    }
    section p input[type="checkbox"]::before {
      content: "ahhhh";
      width: 12px;
      height: 12px;
      background: #555;
    }

So is there something I'm missing? I am fairly new to ::before and ::after, but I think I understand the basics.

Can someone help?