3

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.

Hello World
  • 94
  • 1
  • 6
  • 23
  • Before and after tags on elements that cannot have content is not valid markup. Related -> [:before && :after pseudo elements not showing Firefox](https://stackoverflow.com/questions/35378360/before-after-pseudo-elements-not-showing-firefox) and [HTML not showing up on Firefox and IE](https://stackoverflow.com/questions/54480884/html-not-showing-up-on-firefox-and-ie) – Alexandre Elshobokshy Sep 07 '21 at 14:36
  • @AlexandreElshobokshy, Not a valid markup only for firefox? – Hello World Sep 07 '21 at 14:41
  • For all browsers, [in theory](https://stackoverflow.com/a/54481724/9942418). Someone can correct me if I'm wrong. – Alexandre Elshobokshy Sep 07 '21 at 14:41
  • @AlexandreElshobokshy, Strange.. I have referred to all other questions that you have shared but that doesn't solve my issue.. Could you please help me in providing the solution here.. Again point here is that the text which I display in progress bar will vary dynamically.. – Hello World Sep 07 '21 at 14:43
  • Any solution is possible for you? Even js per your tag? – Alexandre Elshobokshy Sep 07 '21 at 14:44
  • @AlexandreElshobokshy, Yes but it needs to be exactly like the progress bar as like shown in the question.. – Hello World Sep 07 '21 at 14:44
  • Take a look at [this](https://stackoverflow.com/a/41430146/9942418) first – Alexandre Elshobokshy Sep 07 '21 at 14:49

0 Answers0