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

Question

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

假设蓝色是值而红色是最大值，我如何在其中添加标签，如“35”？

Answer 1

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

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

position: relative;
left: -100px;

左侧强制文本位于其顶部的栏旁边。

在评论中，Matthias指出如果进度条宽度为100％，则left不起作用。

它不起作用，因为它会强制栏下面的文字。如果任何宽度的条足以强制下面的文本，它都会失败。

相反，你必须更聪明一点，做一些事情：

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

这里顶部：-1.5em取代了jsFiddle中的左侧调整。左边距是试图使文本居中。它应该实际上小于50％。

如果某人有一个更好的解决方案，可以将文字集中在条形图上，而不像手工波浪50％的边距，可以随意评论它，我会再次调整它。

Answer 2

我自己试图这样做，最后遇到了一种解决方法。

使用伪元素：在以不同的方式完成之前

您使用 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>

如果您每次都不想使用相同的文本格式，那么您可以使用数据属性（即数据标签）

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