psuedo-element in CSS is not showing on the page although the class is correct. This using React, CSS and a Font Awesome icon

Question

I'm trying to make a component in React that uses Font Awesome to display a certain number of stars per product rating, including partial stars.

From this previous answer I saw that you can do this using ::after, and I can see it works fine on jsfiddle. For example -

.star {
  display: inline-block;
  position: relative;
  font-size: 100px;
  color: #ddd;
}

.star::after {
  font-family: "Font Awesome 5 Free";
  content: "\f005";
  position: absolute;
  left: 0;
  top: 0;
  width: 30%;
  overflow: hidden;
  color: #f80;
}

However in my implementation only the base styles are showing, and not the ones on the psuedo-element. I can actually see the psuedo-element when I look in the Elements / Styles section of the developer console. However it's not having an effect visually and I've checked in multiple browsers.

Here's some more of my code for reference.

CSS

.star-100 {
  display: inline-block;
  position: relative;
  font-size: 100px;
  color: #ddd;
}

.star-100::after {
  font-family: "Font Awesome 5 Free";
  /* content contains the unicode for the star shape */
  content: "\f005";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0;
  width: 25%;
  overflow: hidden;
  color: #f80;
}

I've also installed FontAwesome using this method for React. Also the stars are showing initially fine it's just the styling afterwards that's not appearing right.

I originally had this with a single : instead of two as in the previous example I saw, I also updated the font-family to match what's in the current FontAwesome documentation and I didn't have it as a string previously which I've changed. I've also messed around with the order of things in the ::after portion yet it's still not showing up on the page.

I'm expecting it to overwrite the original style with what's in the ::after section to allow for showing partial stars based on the percentage as in the example previously. Here's the jsfiddle they linked to.

Instead I'm only seeing the initial styles displaying on the page. So only the "blank" star color I'm initializing it with.

Do you have any advice that could help please? Thanks!

Answer 1

There seems to be a problem with the font family. I used this style sheet and it works fine-

https://use.fontawesome.com/releases/v5.0.6/css/all.css

Here is how I did it using the above stylesheet.

You can run the snippet-

.star-100 {
  display: inline-block;
  position: relative;
  font-size: 100px;
  color: #ddd;
}

.star-100::after {
  font-family: 'Font Awesome 5 Free';
  /* content contains the unicode for the star shape */
  content: "\f005";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0;
  width: 60%;
  overflow: hidden;
  color: #f80;
}

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet"/>
<span class="star-100 fa fa-star"></span>