: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

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

::after and ::before work like this:

  ::before
  ***content***
  ::after

***content***

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

Now let's check with a checkbox:

***content***

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