title: ::before with input in Firefox
body: <p>I'm trying to put some content before an input tag using CSS pseudo-class <strong>::before</strong>. It works in Chrome but not in Firefox. What seems to be the problem with Firefox?</p>
  
  <p>Here's a snippet:</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::before {
   content: '';
   display: block;
   width: 13px;
   height: 13px;
   border-radius: 50%;
   box-shadow: 0px 0px 5px #9F0002 inset;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="radio" name="gender" class="radio" value="male"&gt;male
  &lt;input type="radio" name="gender" class="radio" value="female"&gt;female</code></pre>
  </div>
  </div>
  </p>
  
  <p>...and here's the outcome. Chrome works just fine:</p>
  
  <p><a href="https://i.stack.imgur.com/7Tjnb.png" rel="noreferrer"><img src="https://i.stack.imgur.com/7Tjnb.png" alt="enter image description here"></a></p>
  
  <p>but there are <strong>no changes in Firefox</strong>:</p>
  
  <p><a href="https://i.stack.imgur.com/aRDAD.png" rel="noreferrer"><img src="https://i.stack.imgur.com/aRDAD.png" alt="enter image description here"></a></p>