小编Tit*_*inn的帖子

我有一个样式的HTML5进度条,我想在进度条跨浏览器兼容的情况下显示数据标签.目前它显示在进度条上方.

HTML:

<progress max="100" value="50" data-label="50% Complete"></progress>

CSS:

progress
{
  text-align:center;
  height: 1.5em;
  width: 100%;

  -webkit-appearance: none;
  border: none;
}

progress:before {
  content: attr(data-label);
  font-size: 0.8em;
  vertical-align: 0
}

progress::-webkit-progress-bar {
  background-color: #c9c9c9;
}

progress::-webkit-progress-value {
  background-color: #7cc4ff;
}

progress::-moz-progress-bar
{
  background-color: #7cc4ff;
}

我得到以下结果(见图),但我想在进度条中移动数据标签:

非常感谢您的建议.