Having a little issue with EDGE/IE CSS display of after

Hi guys

Hopefully and easy one but can't seem to figure this out. I am attempting to add a horizontal line to break up some text on a page and also add an image/character in the middle of this (to break up the look of the line). All works great in Chrome but EDGE/IE aren't playing ball and I'm not sure what part is causing the issue.

Here is the CSS for the HR:

hr.splitter {
    border: 0;
    height: 4px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,131,189,0.75), rgba(0,0,0,0)); 
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,131,189,0.75), rgba(0,0,0,0)); 
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,131,189,0.75), rgba(0,0,0,0)); 
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,131,189,0.75), rgba(0,0,0,0)); 
    text-align: center;
    margin: 1em 0;
	position: relative;
}
hr.splitter:after {
    font-family:'FontAwesome';
    display: inline-block;
    position: relative;
    top: -0.7em;
    font-size: 1.5em;
    padding: 0 0.25em;
    background: white;
    margin: 0.1em 0;
}

hr.gradcap:after {
	content: "\f19d"; /* graduation-cap */
	/*content: "\f0eb"; /* lightbulb-o */ }

Select allOpen in new window

and my HTML in EDGE looks like this:

<hr class="splitter gradcap">

Select allOpen in new window

Chrome shows the image/character without any issue but EDGE/IE is only showing the width of the HR (4px) and the image/character is being shown but only the portion within the height of the HR.

Any ideas what I'm missing?

Thanx as always