如何修改代码让HTML meter元素显示数值时附带对应单位

现有代码实现了meter计量条的数值显示，当前显示效果：

Battery voltage 24 #########====
需要在数值后追加对应单位，最终实现效果：
Battery voltage 24 V #########====

现有代码如下：

原有CSS #

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;
}

原有HTML #

<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>

你已经把单位V写在了meter标签的title属性上，只需要调整伪元素的content属性拼接规则，再微调偏移量避免文字重叠即可：

• 修改meter::after的content值，同时读取value属性、空格、title属性做拼接
• 调整伪元素和meter标签的左偏移值，给新增的单位留出显示空间，避免和计量条重叠

修改后的完整CSS：

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

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

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

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

HTML部分不需要改动，后续如果需要更换单位，直接修改meter标签的title属性值即可生效。

内容的提问来源于stack exchange，提问作者user3635160