Why are my CSS star layers not aligning properly?

Question

I want the Yellow Stars to completely obscure the blue stars

Could anyone help complete this? Or at least point to the right direction?

This is my code:

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

It does not work as I would like. What I am doing wrong?

Yellow stars do not completely cover the blue stars.

Answer 1

Just remove overflow: hidden; and it will work like a charm. Below is an example for 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>

Answer 2

Try the "Inspect" feature of the Chrome browser to adjust CSS settings to what you want displayed.

The first two stars were made all yellow with the following changes.

• Remove: "height: 22px;" from .start-ratings-css-top::before
• Change: style="width: 31%" to style="width: 35%"

Another option to get just two (2) yellow stars is ...

• Remove: "height: 22px;" from .start-reatings-css-top
• Remove: style="width: 31%"
• Change: content: "★★"; for .start-ratings-css-top::before