:before && :after pseudo elements not showing Firefox

Question

Firefox is not displaying :after and :before but they do show in Chrome.

Firefox & Chrome:

Viewing the source directly in Firefox shows the CSS is there

Answer 1

The expected behavior can be enabled for Firefox browsers by using the following on the input[type=checkbox]:

input[type=checkbox] {
  -moz-appearance:initial // Hack for Firefox Browsers
}

This option allows you to use :before pseudo-elements on the input-element, just like it works out of the box for Safari and Chrome and Opera Browsers:

input[type=checkbox]::before { 
    ...
}

The moz-appearance is currently experimental technology. More information along with an overview of Browser compatibility can be obtained here: MDN web docs - appearance.

Answer 2

You cannot use ::after and ::before on elements that cannot have content, such as <input />.

::after and ::before work like this:

<element>
  ::before
  ***content***
  ::after
</element>
<next-element>***content***</next-element>

They get inserted before and after the content of a DOM node. Since <input /> cannot have content, there's nowhere to put it.

Now let's check with a checkbox:

<input type="checkbox" />
<next-element>***content***</next-element>

Here, there cannot be ***content*** to surround with pseudo elements.