0

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>
Camelopardalus
  • 499
  • 1
  • 4
  • 20
  • `meter::before { content: ' 'attr(title)' '}` never tested on a `` but figured if you have an `::after` why not? Unless it doesn't work...You already did the work you should post it as a [mcve]. ⏩[look for the brackets `<>` button](https://i.ibb.co/935zWhk/mcve.jpg)⏪ – zer00ne Jun 11 '22 at 02:58
  • Thanks! It worked when I changed content: attr(value); for attr(value) " " attr(title); –  Jun 11 '22 at 04:13
  • Was that `::before`....` or `::before` and `::after`? – zer00ne Jun 11 '22 at 05:54
  • 2
    It may help future visitors to this site if you could put your solution into an answer. – A Haworth Jun 11 '22 at 06:26

1 Answers1

0

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