使用CSS3的:: after并将其添加到meter标签,如下所示.
meter::after {
content : "0.5491";
}
这将显示仪表下方的文字.
更新
由于OP说他想要多个元素,所以更新了代码.将位置从绝对更改为相对,因此文本将始终相对于仪表
为了使它出现在仪表上,使用position:absolute来设置样式,并按如下方式给出top或margin-top-left
meter{
width:100px;
}
meter::after {
content : attr(value);
top:-17px;
left:40px;
position:relative;
}
有关:: after,访问MDN的更多参考
同样使用它,您可以删除span元素.
在这里,我们在css中使用attr()函数.在MDN阅读它
试试下面的代码片段
meter{
width:100px;
}
meter::after {
content : attr(value);
top:-17px;
left:40px;
position:relative;
}
上面的代码不适用于Firefox.这是一个已知的问题,:: after和::之前的伪作用仅适用于webkit浏览器.
对于firefox,请尝试以下代码(这是全局的.它适用于所有浏览器)
meter{
width:100px;
}
span{
}
span::after {
content : attr(data-value);
top:0px;
left:-70px;
position:relative;
}