I am making a progress bar in which the content I receive is from backend and hence included with the help of data attribute like,

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

And included the content via CSS like,

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

Working Snippet:

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>

The above snippet works in chrome but not in firefox..

Could you please help me to fix the issue of loading the dynamic content data-text="488 Available of 500" in all browsers? Thanks in advance.