Reduce a top ul's width by a percentage to reveal another UL that is underneath

Question

I'm trying to make a type of rating section. If someone were to rate a product 4.3 the first 4 boxes will be filled up and the fifth box will be filled up a 3rd of the way. I had a weird Idea partially inspired by this. if you put a div or a ul on top of each other (like z-indexed) and reduced the top div's width by percentage. The top part will represent the votes(4.3) and the bottom part will be all of the li's but you could only see the ones that are not voted on on like it would be grayed and the top would be gold. but I'm starting to think that's not a good idea. It looks like I had problems trying to transfer of that star example in the link to my box example. can you help me with that?

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

.wrapper{
  margin: 1em auto;
  width: 30em;
  background: #ccc;
  height: 15em;
  position: relative;
}
.rating{
  margin: 0;
  padding: 0;
  list-style-type: none;
  float: left;
  margin: 1em;
  position: absolute;

  /*z-index: 9;*/
}
.rating li , .second li{
  padding: 1em;
  float: right;
  background: orange;
  margin-right: .3em;
}
.rating.first{
  position: absolute;
  z-index: 1;
  display: block;
  left: 0;
  overflow: hidden;
  width: 70%;

}
.first li {
  background: red;
}
.second{
  z-index: 0;
}

<div class="wrapper">
  <ul class="rating first clearfix">
    <li>5</li>
    <li>4</li>
    <li>3</li>
    <li>2</li>
    <li>1</li>
  </ul>
  <ul class="rating second clearfix">
    <li>5</li>
    <li>4</li>
    <li>3</li>
    <li>2</li>
    <li>1</li>
  </ul>
</div>

The code doesn't show the correct output. It's just there to show what I'm working with.

EDIT:: Maybe I could use a negative margin left. EDIT:: Nah that would mess up the alignment with the numbers in the boxes I think.

Answer 1

Try this:

.wrapper {
  margin: 1em auto;
  width: 270px;
  height: 50px;
  position: relative;
}

.rating {
  display: block;
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: 270px;
}

.rating li {
  text-align: center;
  float: left;
  margin: 0 2px;
  background: #ccc;
  width: 50px;
  height: 50px;
  line-height: 50px;
}
.the_rating {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  height: 50px;
  width: 50%;
}
.the_rating li {
  background: orange;
}

<div class="wrapper">
  <ul class="rating first">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
  <div class="the_rating">
    <ul class="rating second">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
  </div>
</div>

If you need me to explain any particular section, let me know.