CSS content: attr() ไม่ทำงานบน HTML5 Progress Element

Progress Element ไม่รองรับ ::before/::after ในบาง Browser

Browser ไม่ให้ Pseudo-elements บน <progress> (Replaced Element)

Workaround: เพิ่ม Static Content ใน CSS

progress::-webkit-progress-bar:before,
progress::-webkit-progress-bar:after {
    content: '989'; /* Static text */
}

ทางเลือกดีกว่า: ใช้ Wrapper Div

<div class="progress-wrapper">
  <progress max="100" value="60"></progress>
  <span class="label">60%</span>
</div>

.progress-wrapper { position: relative; }
.label { position: absolute; top: 0; left: 0; right: 0; text-align: center; }

ใช้ Div ครอบ Progress แล้วจัด Label เอง จะควบคุมได้เต็มที่