【问题标题】：How to make text in <meter> tag visible over the meter如何使 <meter> 标签中的文本在仪表上可见
【发布时间】：2023-03-29 01:15:01
【问题描述】：

给定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 进行测试，兼容性不是紧迫的问题（内部项目）。

我更喜欢“丑陋的css”解决方案而不是“丑陋的html”解决方案。

更新：（总结一些cmets）

在 Firefox 中，似乎有一些魔法使来自仪表的内容不可见（包括来自仪表::after、仪表跨度::after 和类似组件的内容）。所以问题是是否有一个可以覆盖它的css。设置宽度、高度和可见性没有帮助。

【问题讨论】：

我找到了this 的问题，但它似乎只适用于 webkit 浏览器。也许它可以在某些方面有所帮助？
我见过那个，但除了与 Chromecentic 一样，它还讨论了仪表的样式而不是其中的文本。
确实是这样。我并不是说这是不可能的，我没有足够的经验，但是这将很难实现..
你必须从仪表标签中取出跨度。它并不意味着保存内容或显示文本。（与进度标签相同）。在该标记之后或之前添加文本信息是这样做的方法....它不是丑陋的 HTML，它是可访问的 HTML ;)
这是不可能的，因为我会有数百个不同的仪表。我的问题是是什么阻止我获取仪表的内部子树并使其可见。

标签： html css firefox

【解决方案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

试试下面的sn-p

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>

【讨论】：

这种方法的一个大问题是它只适用于单米，但是当我在页面上有大量的 then 时，我会为它们中的每一个动态生成 css。
@gorn 正如你所说，你有很多元素，我更新了代码。请检查一下
这要好得多，但请参阅@KarelG 答案下方的讨论 - 这与您的类似。它不知何故不会与最新的 FF 分叉。
@gorn 我更新了新代码。检查Firefox中的第二个sn-p。基于您问题中的第一个代码。变化不大。取米外的跨度
这是一个很好的解决方案。虽然由于使用 CSS 而无法访问。屏幕阅读器会读取仪表内嵌入的数据吗？我想我们将不得不使用 aria-label..

【解决方案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/

【讨论】：

感谢您的回答。我更喜欢“丑陋的 html”解决方案之上的“丑陋的 css”解决方案，我已经相应地编辑了这个问题。很抱歉没有立即提及。
问题不在于找出文本的特定部分根本不显示的原因。我一直认为 css 可以覆盖任何东西（即使需要 !important）。

【解决方案3】：

Whelp，这是一个有趣的问题。我唯一能想到的就是使用content 属性，在::before 和::after 伪选择器中使用。

然而，问题在于价值，假设您有多个仪表。好吧，我认为我有一个解决方案：内容的 attr(...) 关键字。

因此您只需提供一个值作为属性，如下面的data-value。

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

然后就是简单的添加和调整添加内容的位置。

但是 ...遗憾的是它还没有得到广泛的支持。我认为只有 chrome...

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>

【讨论】：

attr是官方css添加的吗？现在在 FF/debian 9 中尝试，但没有成功。
@gorn 如果您检查规格 1.2. Alternative Text for Accessibility 或检查 introduction 的“示例 3”，那么您可以。但如前所述，它尚未得到广泛支持。在铬中尝试。它在那里工作。但不是在 Firefox 和（刚刚检查过的）Edge 中。也许将来它会起作用。我知道你不能依赖它。我只是说有一种纯 CSS 方式。也许我可以同时找到另一种解决方法。但我正在工作。
整个事情很奇怪-我刚刚尝试了使用 a 标签而不是仪表的方法，并且一切正常。您甚至可以直接使用 value 属性（如果它们相等），但它不适用于meter。仪表使它的内容变得不可见的整个事情很奇怪。
那是因为meter 是一个相当新的（和不同的）HTML 元素。但是你的评论给了我一个想法。让我修补一下。
多么“不同”——这实际上是主要问题。如果仪表具有例如宽度：0 !important，可见性：隐藏！重要；默认情况下，可以覆盖它。但它似乎以不同的方式隐藏了内容。

【解决方案4】：

在 CSS 中添加 ::before 选择器可以查看仪表顶部的文本

CSS：

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

HTML：

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

【讨论】：

这在 FF 中不起作用（参见其他 cmets）+ 它不适用于更多的米 + 它不会将文本放在米的顶部而是在它的上方。

【解决方案5】：

我认为这是最好的解决方案，将数据放入仪表的值

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

【讨论】：

【解决方案6】：

我一直在寻找解决方案，是的，之前和之后的伪元素非常适合静态内容，如果您想使用 Javascript 更改值，或者使用 php 从数据库中提取值，则使用伪元素会更难元素。

数据属性可能作为上述建议的答案，但它似乎不适用于每个浏览器，因此在我看来/据我所知，如果您想轻松更改值，这是最简单的解决方案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;
}

这会将跨度文本放在仪表栏的中心，当然您可以使用顶部和左侧的值来更改它。

【讨论】：