:before psuedo element is not working in IE 11

Question

This is the code is not working in IE11, It's working fine in chrome and Mozilla. I am trying to add a background color on hover a div.border-green, It's failing in IE 11

.border-green{
    border-bottom: 5px solid #50BE87 !important;
    display: block;
}

.border-green::before{
    content: " ";
    display: block;
    background: linear-gradient(to top, #50BE87 59%, #6a7b886b 20%);   
    visibility: hidden;
    transition: all 450ms ease-out;
    position: absolute;
    opacity: 0;
    left: 15px;
    top: 0%;
    height: 96%;
    width: 91%;
    z-index: 1;
 }

 .border-green:hover::before {
    opacity: 1;
    visibility: visible;
} 

Answer 1

Internet Explorer does not understand RGBA hexadecimal color codes (4 bytes)..

If you drop the transparency, it works fine:

background: linear-gradient(to top, #50BE87 59%, #6a7b88 20%);

Or you can create a kind of mixin by including both lines. This seems to work as well:

background: linear-gradient(to top, #50BE87 59%, #6a7b88 20%);
background: linear-gradient(to top, #50BE87 59%, #6a7b886b 20%);

Chrome and Mozilla will eventually take the second line. But because the second line fails in IE, IE seems to fall back to the first line. I'm not sure if this is a safe strategy, however.

Or you could just use the rgba function. That works fine in IE as well:

background: linear-gradient(to top, #50BE87 59%, rgba(106, 123, 136, 0.42) 20%);