如何在仪表上显示<meter>标签中的文字

Question

鉴于html

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

我希望文本0.5491在上面meter.我尝试使用常用的CSS技术设置文本样式,但它根本不会显示.在检查员中,无论我说多少,都说宽度和高度都是0

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

我做了更多尝试,这些例子都是简化的.我使用Firefox进行测试,兼容性并不紧迫(内部项目).

我更喜欢"丑陋的hss"解决方案之上的"丑陋的CSS"解决方案.

更新:(总结一些评论)

在Firefox中,似乎有一些魔法使得来自米的内容不可见(包括来自meter :: after,meter span :: after和simillar组件的内容).所以问题是是否有一个可以覆盖它的CSS.设置宽度,高度和能见度没有帮助.

Answer 1

使用CSS3 ::after并将其添加到meter标记,如下所示.

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

这将显示下面的文字meter.

更新

由于OP说他想要多个元素,更新了代码.从改变后的位置absolute,以relative使文本将始终相对于被meter

为了让它出现在meter它使用,样式position:absolute并给予top或margin-top与left如下

meter{
  width:100px;
}

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

有关更多参考::after,请访问MDN

同样使用它,您可以删除span元素.

在这里,我们attr()在css中使用函数.在MDN中阅读它

试试下面的代码片段

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>

上面的代码不适用于Firefox.这是一个已知的问题,::after并且::before伪仅在webkit浏览器中起作用.

对于firefox,请尝试以下代码(这是全局的.它适用于所有浏览器)

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>

Answer 2

可能还有其他方法可以做到这一点。我可以看到这是有效的：添加单独的代码并使用它。

<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/