HTML meter display value with unit

327 Views Asked by At

My code displays a meter with the value displayed: ex.
Battery voltage 24 #########====
I would like to add the units too so it looks like this:
Battery voltage 24 V #########====

How should I modify my code shown below?

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

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

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

.c_meter meter {
    position: absolute;
    left: 175px;
}
<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>

1

There are 1 best solutions below

0
On

Modify code as shown below.

Not Working:

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

Working code:

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