HTML5 meter doesn't display value in Firefox (ok in Chrome and Edge)

Question

HTML5 meter doesn't display value in Firefox, but works fine with Chrome and Edge.

Here is how it looks in Chrome/Edge: At the right of the label, we can see '48V' and '5A' below

Here is how it looks in Firefox: we don't see '48V' and '5A'

meter {
  justify-content: right;
  width: 135px;
  height: 22px;
}

meter::after {
  content: attr(value) " " attr(title);
  top: -22px;
  left: -50px;
  position: relative;
}

.c_meter {
  position: relative;
  display: block;
  line-height: 22px;
  font-size: 16px;
  height: 22px;
}

.c_meter meter {
  position: absolute;
  left: 190px;
}

<status class="lbl-group">
  <div id="status">
    <div class="output-group" id="batt-group">
      <div class="c_meter">
        <label for="batt_volt">Battery Voltage</label>
        <meter id="batt_volt" min="0" low="0" high="50" max="53" optimum="48" value="0" title="V"></meter>
      </div>
    </div>
    <div class="output-group" id="batt-group">
      <div class="c_meter">
        <label for="batt_curr">Battery Current</label>
        <meter id="batt_curr" min="0" low="0" high="10" max="13" optimum="5" value="0" title="A">45</meter>
      </div>
    </div>
  </div>
</status>

Does anyone know how to make this work in Firefox?

I expected that it would work in Firefox. I don't know what to try. Results are shown above.