Estoy creando una barra de progreso en la que el contenido que recibo es del backend y, por lo tanto, se incluye con la ayuda de atributos de datos como,

<progress max="500" value="488" data-max-value="500" data-text="488 Available of 500"></progress>

E incluyó el contenido a través de CSS como,

 progress::before { content: attr(data-text); position: absolute; color: #fff; font-size: 15px; padding: 0 10px; top: 18%; }

Fragmento de trabajo:

 progress { color: blue; height: 50px; } progress::before { content: attr(data-text); position: absolute; color: #fff; font-size: 15px; padding: 0 10px; top: 12%; }

 <progress max="500" value="488" data-max-value="500" data-text="488 Available of 500"></progress>

El fragmento anterior funciona en Chrome pero no en Firefox.

¿Podría ayudarme a solucionar el problema de cargar el contenido dinámico data-text="488 Available of 500" en todos los navegadores? Gracias por adelantado.