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

Question

我正在设计一个星级评分系统，并且如果评分是4.5或3.5或2.5等，我想显示半颗星。例如，如果等级为4.5，那么我想显示4个半金星和其余的灰色星。就像我们在电子商务网站上看到的一样。

我正在使用带有content属性的pseudo :: before元素通过CSS显示星星。当我减小父元素的宽度以显示金色星星时，content属性的高度会自动增加，并且不会显示一半星星。怎么做，请有人回答。预先感谢。

.grey-stars {
  position: relative;
  margin-bottom: 0;
  display: inline-block;
  vertical-align: baseline;
  overflow: hidden;
  color: #b5b5b5;
  height: 55px;
}

.grey-stars::before {
  content: '\f005  \f005  \f005  \f005  \f005';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 2rem;
}

.gold-stars {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  display: inline-block;
  vertical-align: baseline;
  overflow: hidden;
  color: gold;
}

.gold-stars::before {
  content: '\f005  \f005  \f005  \f005  \f005';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 2rem;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<div class="grey-stars">
  <div class="gold-stars" style="width: 85%"></div>
</div>

Answer 1

请尝试这个

使用$('#empDetailsModal').modal('show');来金星课程

更多信息：访问white-space

我在这里给white-space: nowrap;给出了 2.5级

width="50%"

.grey-stars{
    position: relative;
    margin-bottom: 0;
    display: inline-block;
    vertical-align: baseline;
    overflow: hidden;
    color: #b5b5b5;
    height: 55px;
}
.grey-stars::before{
    content: '\f005  \f005  \f005  \f005  \f005';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 2rem;
}
.gold-stars{
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    display: inline-block;
    vertical-align: baseline;
    overflow: hidden;
    color: gold;
    width: 100%;
    white-space: nowrap;
}
.gold-stars::before{
    content: '\f005  \f005  \f005  \f005  \f005';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 2rem;
}