title: Custom checkbox with CSS ::before - not working in Firefox/Edge
body: <p>I have come up against a very annoying CSS issue while trying to get a project working cross-browser (not bothered about IE, it's only a hobby project, but it would be nice to get it working on all modern browsers at the very least). It relates to some checkboxes which I wish to apply custom styles to - I know you can't do very much with the standard HTML <code>&lt;input type="checkbox"&gt;</code> so I have done what is recommended in many places, and used a <code>::before</code> pseudo-element. And I was pleased with the result in Chrome. Imagine my surprise when I find that my custom checkbox simply doesn't display <em>at all</em> in Firefox!</p>
  
  <p>I've been playing with this for a few hours and have stripped it right back to the very root of the problem - and it's something to do with the checkbox itself, rather than any other CSS it's interacting with. Here's the bare minimum example:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>input[type="checkbox"] {
      visibility: hidden;
  }
  
  input[type="checkbox"]::before {
      visibility: visible;
      content: "";
      display: block;
      width: 1.1em;
      height: 1.1em;
      color: #eddc23;
      border: 1px solid #eddc23;
      background-color: #540123;
      border-radius: 35%;
      line-height: 1.27;
      text-align: center;
      cursor: pointer;
  }
  
  input[type="checkbox"]:checked::before {
      content: "\2713";
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="checkbox"&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This should show a dark red checkbox which has a yellow tick when selected. It works perfectly on Chrome and Opera, but not at all on Firefox or Edge. (Here's a <a href="https://codepen.io/robinzigmond/pen/NmeaeJ" rel="nofollow noreferrer">CodePen link</a> of the same in case the Stack Overflow snippet somehow exhibits different behaviour). CSS isn't one of my strong points and despite a few hours of experimenting and googling, I'm baffled.</p>
  
  <p>Would appreciate any pointers, not only as to how to get this working cross-browser, but as to <em>why</em> it's not working on FF/Edge (inspecting the element on Firefox shows no sign of a <code>::before</code> pseudo-element at all. I've also ruled out it being to do with the empty <code>content</code> property, since changing that to real text fails to make it visible in the browsers concerned).</p>