Html 当我减小父元素的宽度时，伪内容属性的高度增加，为什么？

我正在设计一个星级评定系统&如果评级为4.5、3.5或2.5，我想显示半个星级，以此类推。例如，如果评级为4.5，那么我想显示4颗半金星，其余为灰星。这就像我们在电子商务网站上看到的一样

我使用pseudo:：before元素和content属性通过CSS显示星星。当我减小父元素的宽度以显示金星时，内容属性的高度会自动增加&它不会显示半星。如何做到这一点，请有人回答。提前谢谢

。灰星{
位置：相对位置；
页边距底部：0；
显示：内联块；
垂直对齐：基线；
溢出：隐藏；
颜色：#b5；
高度：55px；
}
.灰星：：以前{
内容：'\f005\f005\f005\f005\f005\f005'；
字体系列：“字体真棒5免费”；
字号：900；
字号：2rem；
}
.金星{
位置：绝对位置；
身高：100%；
宽度：100%；
排名：0；
左：0；
显示：内联块；
垂直对齐：基线；
溢出：隐藏；
颜色：金色；
}
.金星：：以前{
内容：'\f005\f005\f005\f005\f005\f005'；
字体系列：“字体真棒5免费”；
字号：900；
字号：2rem；
}

请试试这个

使用

空白：nowrap至金星等级

更多信息：访问

这里我给出了
width=“50%”
即2.5评级



。灰星{
位置：相对位置；
页边距底部：0；
显示：内联块；
垂直对齐：基线；
溢出：隐藏；
颜色：#b5；
高度：55px；
}
.灰星：：以前{
内容：'\f005\f005\f005\f005\f005\f005'；
字体系列：“字体真棒5免费”；
字号：900；
字号：2rem；
}
.金星{
位置：绝对位置；
身高：100%；
排名：0；
左：0；
显示：内联块；
垂直对齐：基线；
溢出：隐藏；
颜色：金色；
宽度：100%；
空白：nowrap；
}
.金星：：以前{
内容：'\f005\f005\f005\f005\f005\f005'；
字体系列：“字体真棒5免费”；
字号：900；
字号：2rem；
}

如何添加星星？你能分享你的font Aweasome linkdisplay属性吗？没有ruby值，你在哪里找到的？font Aweasome CSS和font Aweasome JavaScript有什么区别？我使用了
，但它不起作用：（我使用了font awesome 5.ruby属性，但在上没有提到，我应该在哪里找到真正的规范？我更新了答案
空白：nowrap；
用于修复此问题。