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 the visual experience of the user interacting with this element. Let’s add two of these elements to a new project template.

You can download the template and the source code of the finished example from Github:

GitHub - webondevices/html-css-wizardry: Source for the html-css-wizardry book

<progress
  class="percentage"
  title="Loading..."
  max="10"
  value="1"></progress>
<progress
  class="steps"
  title="Work in progress..."
  max="10"
  value="8"></progress>

With no CSS styling added and just relying on the default styling assigned by the browser, this is how they look in Chrome on Mac OS:

The <progress> element was designed to capture and visually represent the…