如何在进度条标签内添加标签？答案

【问题标题】：How can I add label inside a progress bar tag?如何在进度条标签内添加标签？
【发布时间】：2012-09-09 06:37:17
【问题描述】：

我想在我的进度条标签中添加一个标签，就像这个漂亮的例子一样：

假设蓝色是值，红色是最大值，我怎样才能在里面添加一个标签，比如我的“35”？

【问题讨论】：

老问题，但要投票，因为那个演示太棒了。
“美丽的例子”:)

标签： html progress-bar

【解决方案1】：

使用 CSS 的 position:relative 将文本移动到栏上。

短条的快速而肮脏的解决方案是：

position: relative;
left: -100px;

where left 强制文本位于其顶部的栏旁边。

在 cmets 中，Matthias 指出如果进度条为 100% 宽度，left 将不起作用。

它不起作用，因为它强制在栏下方显示文本。对于任何足以强制下面的文本的条宽度，它都会失败。

相反，您必须变得更聪明，并执行以下操作：

    position: relative;
    top: -1.5em;
    margin-left: 50%;

这里 top:-1.5em 替换了 jsFiddle 中的左侧调整。 margin-left 是一种使文本居中的尝试。它实际上应该略低于 50%。

如果有人有更好的解决方案将文本居中放置在比手动波浪形 50%ish 边距更少 hacky 的栏上，请随时发表评论，我会再次调整。

【讨论】：

@MatthiasKuhn 对此进行了修复。

【解决方案2】：

我自己尝试过，最后找到了解决方法。

使用伪元素 :before you can do it in a different way

你使用 content: attr(value) 像这样：https://jsfiddle.net/96z0gwv7/1/ - 链接上的更多 CSS 样式

progress
{
  text-align:center;
}

progress:before {
  content: 'Value is ' attr(value);
}

<progress value="6" max="10"></progress>
<progress value="9" max="10"></progress>

如果您不希望每次都使用相同的文本格式，则可以使用 data 属性（即 data-label）

.unique:before {
   content: attr(data-label);
}

<progress class="unique" value="9" max="10" data-label="90% completed"></progress>
<progress class="unique" value="0" max="10" data-label="About to begin"></progress>

【讨论】：

有人知道firefox的解决方法吗？