Star rating using Font Awesome doesn't work properly on Edge and IE

Question

The star rating using Font Awesome defined by width provided below is working fine on Chrome and Firefox, but on Edge and IE doesn't. Anyone know what could it be?

JSFiddle

Chrome and Firefox

Edge and IE

.star-rating {
  display: inline-block;
  position: relative;
  line-height: 1;
}
.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>

Answer 1

This is a bug that the M$ browser has when dealing with pseudo elements. The workaround is:

 .star-rating {overflow: hidden;}

Under a browser that is designed to comply to standards (i.e. real browsers such as Chrome and Firefox), just having .star-rating::after is good enough. Unfortunately, M$ browsers are garbage.

Check the styles in the developer tools and you'll see that all of the pseudo elements ::before and ::after are crossed out. This is one of the many bugs IE is infested with. Here are the symptoms:

• The developer tools have all of the pseudo element styles crossed out
• Although the styles look like they are disabled according to the developer tool, the majority of them are not.
• If there is a behavior that is unique to only IE and/or Edge, then the bug's secondary side effect has manifested. There are style properties that are ignored when applied to a pseudo element when the parent element doesn't implicitly have the property itself.

Issue: In OP's specific case, the pseudo element: .star-rating::after property: overflow: hidden was ignored because IE requires the parent: .star-rating to have it as well.

---

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>