There is a progress bar in which the percentage performed is indicated. For example,

.progress { width: 220px; height: 23px; background: #E1E7ED; position: relative; } .progress-line { width: 50%; background:#5FB053; height: 23px; position: absolute; } .progress-percent { position: absolute; text-align: center; width: 100%; padding: 2.2px; } 
 <div class="progress"> <div class="progress-line"></div> <div class="progress-percent">Выполнено 50%</div> </div>

How to change the text color Выполнено ..% to white only in the part that is filled with green?

    1 answer 1

    You can put .progress-line inside the div with "Completed".

     .progress { width: 220px; height: 23px; background: #E1E7ED; position: relative; } .progress-line { width: 50%; background:#5FB053; height: 23px; position: absolute; overflow: hidden; } .done-progress-persent{ position: absolute; text-align: center; width: 220px; /*должен быть такойже как и .progress*/ padding: 2.2px; color: #fff; } .progress-percent { position: absolute; text-align: center; width: 100%; padding: 2.2px; } 
     <div class="progress"> <div class="progress-percent">Выполнено 50%</div> <div class="progress-line"> <div class="done-progress-persent">Выполнено 50%</div> </div> </div>

    As the progress of the bar increases, some letters will be “cut” into the white and black parts (can be seen at 48%).