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>

它不像我想要的那样工作。我做错了什么？

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

标签： htmlcss

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>