html - 为什么我的 CSS 星形层没有正确对齐？

Question

我想让黄色的星星完全遮住蓝色的星星

有人可以帮忙完成吗？或者至少指出了正确的方向？

这是我的代码:

.star-ratings-css {

  width: 100px;
}
.star-ratings-css-top {
      display: block;
     height: 22px;
    position: relative;
    overflow: hidden;
}
.star-ratings-css-bottom::before  {
color: #167ac6;
    content: "★★★★★";
    font-size: 22px;
    position: absolute;
}
.star-ratings-css-top::before  {
    color: #f4b414;
    content: "★★★★★";
    font-size: 22px;
    position: relative;
}

<div class="star-ratings-css">
  <div class="star-ratings-css-bottom"></div>
  <div class="star-ratings-css-top" style="width: 31%"></div>

</div>

它没有像我希望的那样工作。我做错了什么？

黄色星星并没有完全覆盖蓝色星星。

Answer 1

只需删除 overflow: hidden; ，它就会像魅力一样工作。以下是 4/5 的示例。

.star-ratings-css {
  width: 100px;
}
.star-ratings-css-top {
    display: block;
     height: 22px;
    position: relative;
}
.star-ratings-css-bottom::before  {
    color: #167ac6;
    content: "★★★★★";
    font-size: 22px;
    position: absolute;
}
.star-ratings-css-top::before  {
    color: #f4b414;
    content: "★★★★";
    font-size: 22px;
    position: relative;
}

<div class="star-ratings-css">
  <div class="star-ratings-css-bottom"></div>
  <div class="star-ratings-css-top" style="width: 31%"></div>
</div>