CSS pseudo class ::after getting crossed in Microsoft edge

Question

I am using custom styling in VF page and showing apex:inputFile component as a SLDS-button. This styling is working in chrome, but not working in Edge and FF. In Edge, the stylings in ::after are all getting crossed.

I have used the styling as given here, and modified them to display slds-button.

How can this be achieved in Edge?

Also, the styles are not crossed out in Firefox, but still I get same UI output as is in Edge.

Code:

<apex:slds />

<style>
.fileType {
    display: block;
    position: absolute;
    width: 5rem;
    margin: auto;
    cursor: pointer;
    border: 0;
    height: 1.6em;
    border-radius: 5px;
    outline: 0;
    color: white;
    background-color:rgb(255, 255, 255);
    }
    .fileType:hover:after {
    background-color: rgb(244, 246, 249);
    }
    .fileType:after {
    transition: 200ms all ease;
    background-color:rgb(255, 255, 255);
    font-size: .75rem;
    text-align: center;
    position: absolute;
    top: -0.6em;
    left: 0;
    width: 7em;
    height: 2.8em;
    display: block;
    content: 'Browse';
    border: 1px solid rgb(216, 221, 230);
    color: rgb(255, 255, 255);
    vertical-align: middle;
    border-radius: .25rem;
    line-height: 2.5em;
    color: rgb(0, 112, 210);
    }                                                                                                                             
</style>

<apex:form id="theForm">

    <!-- divContainer -->
    <div id="divContainer" class="slds">     

            <div class="slds-form-element__group">
                <!-- File Input -->
                <div class="slds-grid slds-m-top--xx-medium">                                                                
                    <div class="slds-form-element slds-size--1-of-1">
                    <label><abbr class="slds-required">*</abbr>File</label><br></br>
                        <apex:inputfile id="fileSelectedForUpload"
                                        styleClass="fileType slds-m-top--x-small"
                                        style="color:white"
                                        >
                        </apex:inputfile>
                    </div>
                </div>
            </div>
    </div>
    <!-- divContainer -->
</apex:form>

In Chrome:

In Edge:

Answer 1

Got the solution after googling a bit here

Wrapped up the apex:inputFile in tag and gave fileContainer style class as below externally. In earlier case the ::after pseudo class was causing problems in browsers, which here was not an issue.

Following code solved the issue:

<apex:slds />

<style>
.fileContainer {
        overflow: hidden;
        position: relative;
    }

    .fileContainer [type=file] {
        cursor: pointer;
        display: block;
        font-size: 999px;
        filter: alpha(opacity=0);
        min-height: 100%;
        min-width: 100%;
        opacity: 0;
        position: absolute;
        right: 0;
        text-align: right;
        top: 0;
    }                                                                                                                                       
</style>

<apex:form id="theForm">

<!-- divContainer -->
<div id="divContainer" class="slds">     

        <div class="slds-form-element__group">
            <!-- File Input -->
            <div class="slds-grid slds-m-top--xx-medium">                                                                
                <div class="slds-form-element slds-size--1-of-1">
                <label><abbr class="slds-required">*</abbr>File</label><br></br>
                    <label id="fileInputLabel" class="fileContainer slds-button slds-button--neutral slds-m-top--xxx-small">
                            Browse
                            <apex:inputfile id="fileSelectedForUpload"
                                        onchange="onFileChange(this);"
                                        value="{!objAttachment.body}" 
                                        filename="{!objAttachment.Name}" 
                                        size="{!objAttachment.BodyLength}" 
                                        contentType="{!objAttachment.ContentType}"
                                        style="color:white">
                                        </apex:inputfile>
                         </label>
                </div>
            </div>
        </div>
</div>
<!-- divContainer -->
</apex:form>