How to make only part of text on top of colored div white?

Question

How could I make only the part of the text on the red div white? (so top stays dark grey, but bottom part white)

Answer 1

You could do it something like this

.box {
      height: 60px;
      line-height: 60px;
      position: relative;
      text-align: center;
      width: 80px;
  }
  .box:before {
      content: '';
      display: block;
      position: absolute;
      background: red;
      left: 0;
      right: 0;
      height: 30px;
      bottom: 0;
  }
  span {
      color: #fff;
      position: absolute;
      left: 0;
      right: 0;
      height: 30px;
      line-height: 0;
      bottom: 0;
      line-height: 0;
      overflow: hidden
  }

<div class="box">
    60%
<span>
    60%
</span>
</div>

Update: Here is another code. Now you just need to change the height of :before and :after pseudo elements which is commonly defined and you need to change it at just one place. Just change the value from 50% to any value that you want. I hope it helps:

.box {
    align-items: center;
    display: flex;
    height: 60px;
    justify-content: center;
    position: relative;
    visibility: hidden;
    width: 80px;
}
.box:before,
.box:after {
    bottom: 0;
    content: attr(data-value);
    display: block;
    height: 50%;
    left: 0;
    line-height: 0;
    position: absolute;
    right: 0;
    text-align: center;
    visibility: visible;
}
.box:before {
    color: #000;
    z-index: 2;
}
.box:after {
    background: red;
    color: #fff;
    overflow: hidden;
    z-index: 3;
}

<div class="box" data-value="60%">
    60%
</div>