HTML Progress Bar with CSS-only Dynamic Labels

Pseudo-elements are awesome and there’s so much we can do with them! I’m specifically talking about the awesome ::before and ::after elements.

With these two pseudo-elements and a CSS function, we can display HTML attribute values on our web page.

We are going to work with the <progress> HTML element as it has a few exciting attributes we could use to enrich…