Customize checkbox code not working in Firefox and internet explorer

I have created a custom checkbox. It is working fine in chrome but not working in Firefox and IE. I don't want to use any extra

.check:after {
        line-height: 1.5em;
        content: '';
        display: inline-block;
        width: 30px;
        height: 30px;
        margin-top: -4px;
        margin-left: -4px;
        border: 1px solid rgb(192,192,192);
        background: rgb(224,224,224);
    }
    .check:checked:after {
        width: 30px;
        content: '\2713';
        height: 30px;
        background: green;
        text-align: center;
        color: #fff;
        font-size: 21px;
        font-weight: bold;
        border: 3px solid green;
    }
    .check:hover:after {
      border: 3px solid green;
    }
    </style>

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