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

user_313522 0
Viewed 3833

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.

firefox css html
6 Answers

I was looking for a solution to this, and yes the before and after pseudo elements work great for static content, if you want to change the value with Javascript or if it's pulled out of a database with php it's harder with the pseudo elements.

The data-attribute might work as an answer above suggested but it doesn't seem to work in every browser and thus here is in my opinion / as far as I know the simplest solution if you want to change the value easily with JS/PHP

HTML

<div class='meter-container'>
    <meter min='0' max='10' value='5'></meter>
    <span class='meter-overlay-text'>50%</meter>
</div>

CSS

.meter-overlay-text {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}
.meter-container {
   position: relative;
}

This puts the span text in the center of the meter bar, you can off course change this with the top and left value.

user_120527360
Related