::before and ::after not rendering on firefox and IE [duplicate]

This question already has an answer here:

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

I developed the code and reviewed it on Google Chrome. This fills the checked checkbox with color.

HTML:

<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>

CSS

input:checked::after {
   content: open-quote;
   background-color: red;
   font-size:9px;
   border:1px solid black;
   border-radius:3px;
   /* height: 10px; */
   padding-left: 8px;
}

But this code is not working on FF and IE.

The reason I figured out is that the ::after is not rendering on FF and IE.

Please suggest a solution.

Here is the JsFiddle Link

Please view this fiddle on firefox and IE to see the problem