Note we require extra <span> tags because the <progress> tag is an empty
tag (like <img>), and so it can't have ::before or ::after
pseudo-elements. There's a workaround for that, but currently it only
works on Chrome.
For some reason, the text seems to be slightly misaligned vertically in
all implementations I've tried. So the `top: -0.1rem` rule is a hack to
align it properly.
The selector `nth-child(even)` didn't need specific rules, and it's
easier to understand the code for the selector `nth-child(odd)` if all
breakpoints are grouped together.
