更新

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进行测试，兼容性并不紧迫（内部项目）。

我更喜欢“丑陋的hss”解决方案之上的“丑陋的CSS”解决方案。

更新：（总结一些评论）

在Firefox中似乎有一些神奇的东西使得来自米的内容不可见（包括来自米:: after，米跨度:: 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元素。

在这里，我们在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>

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/

Answer 3

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

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

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

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

然后它只是添加和调整添加内容的位置。

但是 ......遗憾的是，它还没有被广泛支持。我认为只有铬......

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>

Answer 4

在选择器之前添加::到css，你可以在米的顶部查看文本

CSS：

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

HTML：

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

Answer 5

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

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

Answer 6

我一直在寻找解决方案，是的，伪元素的before和after对于静态内容非常有用，如果您想使用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;
}

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

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

6 个答案:

更新