<div id="grade" style="--grade1: 86; --grade2: 92; --grade3: 99;">
  <div id="a">A</div>
  <div id="b">B</div>
  <div id="c">C</div>
  <div id="d">D</div>
  <div id="f">F</div>
</div>
#grade {
  --total: calc(var(--grade1) + var(--grade2) + var(--grade3));
  position: relative;
  height: 1rem;
}

#a { 
  --totalgrade: calc(269 - var(--total));
}
#b { 
  --totalgrade: calc(239 - var(--total)); 
}
#c { 
  --totalgrade: calc(209 - var(--total)); 
}
#d { 
  --totalgrade: calc(179 - var(--total)); 
}
#f { 
  --totalgrade: calc(-1 - var(--total)); 
}

#grade > div {
  --adjust: min(0, var(--totalgrade));
  max-height: calc(-100px * var(--adjust));
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  background: white;
  width: 100%;
  height: 100%;
  z-index: calc(var(--totalgrade));
}

#grade > div::before {
  counter-increment: grade var(--adjust) grade1 var(--grade1)  grade2 var(--grade2) grade3 var(--grade3);
  content: counter(grade1) ' + ' counter(grade2) ' + ' counter(grade3) ' = ';
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.