const text = styled(div)`
display: flex;
align-items: center;
color: gray;
margin-bottom: 24px;
::before, ::after { //doesn't work
content: '';
width: 100%;
border-top: 1px solid gray;
}
::before {
margin-right: 8px;
}
::after {
margin-left:8px;
}
`;
<text>OR</text>
//solution
const text = styled(div)`
display: flex;
align-items: center;
color: gray;
margin-bottom: 24px;
::before, ::after {
content: '';
display:block;
flex-grow:1;
border-top: 1px solid gray;
}
::before {
margin-right: 8px;
}
::after {
margin-left:8px;
}
`;
<text>OR</text>
fix: https://github.com/ticketmaster/aurora/pull/573/files description: using x and y coordinates doesn't work in IE11 and MSEdge. We have to make use of top and left instead
https://stackoverflow.com/questions/57368041/multiple-box-shadows-doesnt-work-in-msedge
backticks are not supported in IE11 browser if there is a case where you cannot apply babel transpiler. In which you need to write the javascript part appended as the script to the HTML page
<script type="text/javascript">
(function()
{
//code
}());
</script>