How to make text in <meter> tag visible over the meter

Question

Given the html

<meter value="0.55" high="0.999" optimum="1">
  <span class="meter-value">0.5491</span>
</meter>

I would like text 0.5491 on top of the meter. I tried to style the text using usual CSS techniques, but it won't show at all. In inspector it just says width and height is 0 no matter how much I say things like

.meter-value {
  display: block; width: 50px; height: 20px;
}

I made more attempts, these examples are simplified. I use Firefox for tests and compatibility is not pressing issue (inhouse project).

I much more prefer "ugly css" solution above "ugly html" solution.

Update: (to sum up some comments)

There seems to be some magic which makes content from meter invisible (including the content from meter::after, meter span::after and simillar components) in Firefox. So the question is if there is a css which can override this. Setting width, height and visibility did not help.

Answer 1

Make use of CSS3's ::after and add it to meter tag as follows.

meter::after {
  content : "0.5491";
}

This will show the text below the meter.

update

Since OP said that he want multiple elements, updated the code. Changed position from absolute to relative so the text will be always relative to the meter

In order to make it appear on the meter, style it using position:absolute and give top or margin-top and left as follows

meter{
  width:100px;
}

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

For more reference on ::after, Visit MDN

Also using that, you can remove the span element.

Here, we make use of attr() function in css. Read about it in MDN

Try the below snippet

meter{
  width:100px;
}

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

<meter value="0.55" high="0.999" optimum="1">
</meter>
<meter value="0.45" high="0.999" optimum="1">
</meter>
<meter value="0.85" high="0.999" optimum="1">
</meter>
<meter value="0.95" high="0.999" optimum="1">
</meter>

<br />
<meter value="0.55" high="0.999" optimum="1">
</meter>
<meter value="0.45" high="0.999" optimum="1">
</meter>
<meter value="0.85" high="0.999" optimum="1">
</meter>
<meter value="0.95" high="0.999" optimum="1">
</meter>

The above code doesn't work on Firefox. It is a known issue that ::after and ::before pseudos work only in webkit browsers.

For firefox, try the following code (This is global. It will work on all browsers)

meter{
  width:100px;
}
span{
}
span::after {
 content : attr(data-value);
 top:0px;
 left:-70px;
 position:relative;
}

<meter value="0.55" high="0.999" optimum="1">
</meter>
<span data-value="0.55"></span>
<meter value="0.45" high="0.999" optimum="1">
</meter>
<span data-value="0.45"></span>
<br />
<meter value="0.55" high="0.999" optimum="1">
</meter>
<span data-value="0.55"></span>
<meter value="0.45" high="0.999" optimum="1">
</meter>
<span data-value="0.45"></span>