This is an error that the M $ browser has when working with pseudo-elements . Workaround:
.star-rating {overflow: hidden;}
In a browser that is designed to conform to standards (for example, real browsers such as Chrome and Firefox), having .star-rating::after enough. Unfortunately, M $ browsers are rubbish.
Check the styles in the developer tools and you will see that all the ::before and ::after pseudo-elements are crossed out. This is one of many errors that IE has infected. Here are the symptoms:
- The developer tools have all the styles of pseudo-elements.
- Although styles look as if they are disabled according to the developer's tool, most of them are not.
- If there is behavior unique to IE and / or Edge only, then a secondary side effect of the error occurs. There are style properties that are ignored when applied to a pseudo-element when the parent does not have an implicit property.
Problem:. In the specific case of the OP, the pseudo: .star-rating::after : overflow: hidden property was ignored, since IE requires the parent element: .star-rating have it.
Workaround: Apply overflow: hidden to .star-rating
Demo (tested in Chrome, Firefox and IE)
.star-rating { display: inline-block; position: relative; line-height: 1; overflow: hidden; } .star-rating:before, .star-rating:after { content: "\f005\f005\f005\f005\f005"; display: block; font-family: "FontAwesome"; font-size: 25px; color: #ccc; } .star-rating:after { color: gold; position: absolute; top: 0; left: 0; overflow: hidden; } .star-rating.s0:after { width: 0%; } .star-rating.s1:after { width: 10%; } .star-rating.s2:after { width: 20%; } .star-rating.s3:after { width: 30%; } .star-rating.s4:after { width: 40%; } .star-rating.s5:after { width: 50%; } .star-rating.s6:after { width: 60%; } .star-rating.s7:after { width: 70%; } .star-rating.s8:after { width: 80%; } .star-rating.s9:after { width: 90%; } .star-rating.s10:after { width: 100%; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <span class="star-rating s7"></span>