html - 如何使 标签中的文本在仪表上可见

Question

给定html

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

我想在 meter 顶部输入文本 0.5491。我尝试使用常用的 CSS 技术来设置文本样式，但它根本不会显示。在检查器中它只是说宽度和高度为 0，无论我说多少

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

我做了更多的尝试，这些例子被简化了。我使用 Firefox 进行测试，兼容性不是紧迫的问题(内部元素)。

比起“丑陋的 html”解决方案，我更喜欢“丑陋的 css”解决方案。

更新:(总结一些评论)

似乎有一些魔法可以使 meter 中的内容在 Firefox 中不可见(包括来自 meter::after、meter span::after 和类似组件的内容)。所以问题是是否有一个 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 元素。

在这里，我们使用了 css 中的 attr() 函数。在 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>