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.
5 Answers
Answers 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>Answers 2
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> Answers 3
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>Answers 4
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> Answers 5
I think this is the best solution, put in the value of the meter the data
meter:before{ content:attr(value); } 
0 comments:
Post a Comment