如何将文本放入进度条内？

Question

我想把文字放在进度条中间：

<progress align="left" class="turnbox2 turnbar" id="myturn"></progress>

我希望文字显示进度条的数值

Answer 1

你可以在 css

之前使用

#myturn{
  height:30px;
  width:300px;
  background-color:orange;
  position:relative;
}

#myturn::before{
  position:absolute;
  height:30px;
  background:green;
  content:'Custom text or 70%';//add your text
  top:0;
  left:0;
  width:70%;
  display:flex;
  color:white;
  align-items:center;
  justify-content:flex-end;
  padding-right:10px;
}

<progress align="left" class="turnbox2 turnbar" id="myturn"></progress>

更新：

这是没有 css 的作品：

progress {
    -webkit-appearance: none;
}

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

#myturn span {
    position: absolute;
    display: inline-block;
    color: #fff;
    text-align: right;
}

#myturn {
    display: block;
    position: relative;
    width: 100%;
}

progress {
    width: 100%;
}

<div id="myturn">
    <span data-value="60" style="width: 60%;">custom text or 60%</span>
    <progress value="60" max="100"></progress>
</div>

如何将文本放入进度条内？

How do you put text inside of a progress bar?

html

text

progress-bar