How to make text in 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.

I found [this](http://stackoverflow.com/a/14679114/5178016) question, but it only seems to apply to webkit browsers.. Maybe it can help in some way? — kevin b., May 15 '17 at 15:30
I have seen that one, but in addition to beeing Chromecentic it talkes about styling the meter not about the text within it. — gorn, May 15 '17 at 15:37
that's indeed correct. I'm not saying it is impossible, i don't have enough experience for that, but it will be darn hard to achieve.. — kevin b., May 15 '17 at 15:41
you have to take the span out the meter tag. it is not meant to hold content nor show text. (same with progress tag) . adding text info after or before that tag is the way to do it .... it ain't ugly HTML, it is accessible HTML ;) — G-Cyrillus, May 15 '17 at 15:48
This wouldn't be possible because I will have hundrets of different meters. My question is what is blocking me from taking inner subtree of meter and making it visible. — gorn, May 15 '17 at 18:13
@gorn check the answer and let me know if you have any problem — Sagar V, Jun 21 '17 at 11:33
Bounty attributed, to answer closest to what I hoped for. I can not accept any of the answers, because none of them explains the reason nor answers the question completely. Thanks for help everyone. — gorn, Jun 28 '17 at 22:22

score 10 · Answer 1 · edited Jun 20 '20 at 09:12

10

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>

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 21 '17 at 11:30

Sagar V

12,158
7
41
68

A big problem with this approach is that it only works for single meter, however when I have tons of then on the page I would beed to generate css dynamically for each of them. – gorn Jun 21 '17 at 13:38
@gorn as you said that you have many elements, I updated the code. please Check it – Sagar V Jun 21 '17 at 13:48
This is much better, but see discussion below the @KarelG's answer - which is similar to yours. It somehow does not fork with newest FF. – gorn Jun 21 '17 at 13:57
@gorn I updated with new code. check the second snippet in firefox. based on the first code in your question. Little changes. Take the span outside of meter – Sagar V Jun 21 '17 at 14:14
@gorn let me know if you faced any problem with this code. – Sagar V Jun 21 '17 at 14:24
I wrote an update to sum up the problem - It seems that Firefox supports ::after fine - the question is how to make anything from wihin the meter visible (in Firefox) beeing it span content or construct like meter::after etc - specification says that contents of the meter should not be visible, but it is not clear how the invisibility is achieved and how it can be overriden (setting width, height and visibility did not work) – gorn Jun 22 '17 at 09:52
The second code works in firefox. There is a known issue that the `:after` and `:before` pseudo selectors in `meter` tag will work only in webkit browsers – Sagar V Jun 22 '17 at 09:56
Check the second snippet – Sagar V Jun 22 '17 at 09:57
I'm generally of the mind that you should never specify pixel values as you have to recalculate them every time you want to change the size of something. @SagarV maybe you could use flexbox https://jsfiddle.net/link2twenty/r2ovh0mL/ – Andrew Bone Jun 23 '17 at 15:43
As I mentioned on other places: 1. I do not like html outside the meter tag 2. The question was more about - "what is it that makes content from meter invisible and how it can be overriden" in FF. – gorn Jun 24 '17 at 20:04
The reason is simply Firefox doesn't support :after and :before on meter tag – Sagar V Jun 25 '17 at 13:12
1

This is a great solution. Although not accessible due to use of CSS. Will screen readers read the data embedded within the meter? I guess we will have to use aria-label.. – JAT86 Mar 31 '18 at 02:28
Do I understand correctly that Firefox actually operates according to the spec here, as indicated by gorn's comment ("specification says that contents of the meter should not be visible")? Or is this a bug in Firefox, as the answer indicates ("known issue")? – domsson May 17 '22 at 15:21

score 1 · Answer 2 · answered May 15 '17 at 15:20

1

There might be other way of doing this. I can see this works: add separate code and use that.

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

https://jsfiddle.net/f083nfm1/

answered May 15 '17 at 15:20

tech2017

1,806
1
13
15

Thanks for the answer. I much more prefer "ugly css" solution above "ugly html" solution and I have edited the question accordingly. Sorry for not mentioning it straight away. – gorn May 15 '17 at 15:23
The question is moreless about findig out hte reason why the particular part of the text does not show at all. I always thought that css can override anything (even if the !important is needed). – gorn May 15 '17 at 15:24

score 1 · Answer 3 · answered Jun 23 '17 at 11:33

1

adding ::before selector to css you can view the text on top of meter

CSS:

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

HTML:

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

answered Jun 23 '17 at 11:33

Sneha Bharti

276
2
14

1

This does not work in FF (see other comments) + it does not work with more meters + it does not put the text on top of the meter but above it. – gorn Jun 24 '17 at 19:52

KarelG · Answer 4 · 2017-06-21T12:00:00.453

0

Whelp, that's an interesting question. The only thing that I can think of is to use content property, used in ::before and ::after pseudo-selector.

Yet, the problem is the value, assuming if you have multiple meters. Well, I have a solution for it I think: the content's attr(...) keyword.

So you only have to provide a value as attribute, like the data-value here below.

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

Then it's simply adding and adjusting the positions of the added content.

But ... sadly it's not widely supported (yet). Only chrome I think...

meter::after {
 content: attr(data-value);
 position:relative;
 left: 1.2em;
 top: -1em;
}

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

<meter value="0.22" high="0.999" optimum="1" data-value="0.2219"></meter>

edited Jun 21 '17 at 12:00

answered Jun 21 '17 at 11:54

KarelG

5,176
4
33
49

Is the attr official css addition? Trying in FF/debian 9 now and it did not work. – gorn Jun 21 '17 at 13:40
@gorn if you check the specs [`1.2. Alternative Text for Accessibility`](https://drafts.csswg.org/css-content-3/#alt) or check "Example 3" at the `introduction` then you can. But as said, it is not widely supported yet. Try that in chrome. It works there. But not in Firefox and (just checked) Edge. Maybe in the future it will work. I know that you cannot rely that. I'm just saying that there is a pure CSS way. Maybe I can find another workaround in the meanwhile. But I'm at work atm. – KarelG Jun 21 '17 at 13:49
The whole thing is very strange - I have just tried your approach with the a tag instead of meter and everything works file. You can even use the value attribute directly (if they are equal), but AMASINGLY it does not work with meter. The whole thing with meter making its contents somhow invisible is strange. – gorn Jun 21 '17 at 13:54
That's because `meter` is a fairly new (and different) HTML element. But your comment has given me an idea. Let me tinker with it. – KarelG Jun 21 '17 at 14:02
How "different" - this is in fact the main problem. If the meter had for example width: 0 !important, visibility: hidden !important; by default, that one can override it. But it seems to hide the contants somehow differently. – gorn Jun 22 '17 at 09:53

score 0 · Answer 5 · answered Jun 28 '17 at 07:02

0

I think this is the best solution, put in the value of the meter the data

meter:before{
  content:attr(value);
}

answered Jun 28 '17 at 07:02

marcos.efrem

757
3
13

score 0 · Answer 6 · answered Jul 15 '20 at 12:42

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.

How to make text in tag visible over the meter

6 Answers6

update