psuedo 元素未显示在页面上。这使用了 React、CSS 和 Font Awesome 图标

Question

我正在尝试在 React 中制作一个组件，使用 Font Awesome 来显示每个产品评级的一定数量的星星，包括部分星星。

从这个之前的答案我看到你可以使用

::after

来做到这一点，我可以看到它在jsfiddle上工作得很好。例如-

.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;
}

但是，在我的实现中，仅显示基本样式，而不显示伪元素上的样式。当我查看开发人员控制台的“元素/样式”部分时，我实际上可以看到伪元素。然而，它在视觉上没有效果，我已经检查了多个浏览器。

这是我的更多代码供参考。

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;
}

我还使用 React 的方法安装了 FontAwesome。而且明星们一开始都表现得很好，只是后来的造型看起来不太对劲。

我最初使用的是单个

:

，而不是我在前面的示例中看到的两个，我还更新了字体系列以匹配当前 FontAwesome 文档中的内容，并且之前我没有将其作为字符串已经改变了。我还搞乱了

::after

部分中的内容顺序，但它仍然没有显示在页面上。

我希望它用

::after

部分中的内容覆盖原始样式，以允许根据百分比显示部分星星，如前面的示例所示。这是他们链接到的 jsfiddle。

相反，我只看到页面上显示的初始样式。所以我只用“空白”星星颜色来初始化它。

您有什么建议可以帮忙吗？谢谢！

Answer 1

字体系列似乎有问题。我使用了这个样式表，效果很好-

https://use.fontawesome.com/releases/v5.0.6/css/all.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: 50%;
  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>