如何从数据标签中获取文本以出现在进度条上方而不是内部的文字？

Question

我希望这个栏在上面显示文本。我一直在寻找几个小时，决定离开它，然后我想为什么不问这里，是否有人可以给我一些很棒的见解，谢谢！

.exp_bar_container{
  width:100%;
  top: 12em;
  position: relative;
  display:flex;

}


.ExpBar {
  height: 0.5em;
  width: 100%;
  background-color: #dcdcdc;
  position: relative;
  font-weight:bold;
  float: left;

}
.ExpBar:before {
  content: attr(data-label);
  font-size: 0.8em;
  position: absolute;
  text-align: center;
  left: 0;
  right: 0;
}
.ExpBar .value {
  background-color: #323334;
  display: inline-block;
  height: 100%;
}


.ExpBar::-moz-progress-bar {
  background: #dcdcdc;
}

.ExpBar::-webkit-progress-value {
  background: #630862;
}

.ExpBar::-webkit-progress-bar {
  background: #dcdcdc;
}

    <div class="exp_bar_container">
      <progress id="ExpBarId" class="ExpBar" data-label='20/20' value="1" max="100">

      </progress>
    </div>

Answer 1

只需添加top：-1em; to .expbar：之前：

.exp_bar_container{
  width:100%;
  top: 12em;
  position: relative;
  display:flex;

}


.ExpBar {
  height: 0.5em;
  width: 100%;
  background-color: #dcdcdc;
  position: relative;
  font-weight:bold;
  float: left;

}
.ExpBar:before {
  content: attr(data-label);
  font-size: 0.8em;
  position: absolute;
  text-align: center;
  left: 0;
  right: 0;
  top: -1em; /* added */
}
.ExpBar .value {
  background-color: #323334;
  display: inline-block;
  height: 100%;
}


.ExpBar::-moz-progress-bar {
  background: #dcdcdc;
}

.ExpBar::-webkit-progress-value {
  background: #630862;
}

.ExpBar::-webkit-progress-bar {
  background: #dcdcdc;
}

<div class="exp_bar_container">
      <progress id="ExpBarId" class="ExpBar" data-label='20/20' value="1" max="100">

      </progress>
    </div>